Изображение маска с треугольником внизу

Я пытаюсь выяснить, как лучше всего маскировать div с такой угловой формой, как если бы верхний div в этом случае был фоновым изображением, и оба div были бы ширина 100%:Изображение маска с треугольником внизу

Я видел много учебников там о том, чтобы скрыть изображение с формой круга, но ни о том, как вы бы маскировать границу из DIV как в красной области. Я знаю, что должен быть лучший способ, чем делать это с растровыми изображениями, но я в недоумении.

Было бы лучше сделать это с помощью клипа или SVG? Я не все так обеспокоен старыми браузерами, если результат заключается в том, что они видят красные/синие divs, разделенные плоской линией. Вся красная область будет фоновым изображением, поэтому, если старые (er) браузеры пропустит эту угловую границу, пусть будет так.

источник

2016-04-07 hudsonian

Вы можете использовать transform (skew и rotate) для достижения этого эффекта без использования clip-path, который имеет низкую поддержку

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    background: linear-gradient(lightblue, dodgerblue); 
 
    position: relative; 
 
    overflow:hidden; 
 
} 
 

 
.container:after{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    left:-50%; 
 
    top:-50%; 
 
    background:#D0021B; 
 
    transform-origin: 0 100%; 
 
    transform:skewY(15deg); 
 
} 
 

 
.container:before{ 
 
    position:absolute; 
 
    content:""; 
 
    width:100%; 
 
    height:100%; 
 
    left:50%; 
 
    top:-50%; 
 
    background:#D0021B; 
 
    transform-origin: 100% 0; 
 
    transform:skewY(-15deg); 
 
}

<div class="container"></div>

Для фоновых изображений, вы должны применять top:50% на обоих pseudo-elements

.container { 
 
    width: 500px; 
 
    height: 300px; 
 
    background: url("http://i.imgur.com/5NK0H1e.jpg"); 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.container:after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: -50%; 
 
    top: 50%; 
 
    background: linear-gradient(lightblue,dodgerblue); 
 
    transform: skew(10deg) rotate(10deg); 
 
} 
 
.container:before { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 50%; 
 
    top: 50%; 
 
    background:linear-gradient(lightblue,dodgerblue); 
 
    transform: skew(-10deg) rotate(-10deg); 
 
}

<div class="container"></div>

источник

2016-04-07 14:05:53 Akshay

Это удивительно, хотя кажется, что это ограничило бы мне с помощью фонового изображения в красная область. Я отредактирую исходное сообщение, чтобы это было ясно. Спасибо за это - интересно, есть ли решение с использованием фонового изображения? – hudsonian

Я очень ценю этот ответ - извинения за то, что я не был более ясен в своем оригинальном посте. Это замечательно знать для других разделов, где я не использую фоновое изображение. Спасибо! – hudsonian

@hudsonian Отредактированный мой ответ теперь можно также применить фоновые изображения – Akshay

Если вы планируете использовать clip-path собственности, следует отметить, что browser support очень низкая на данный момент, как CSS Masking Module Level 1 имеет статус «кандидата» Рекомендации для.

Таким образом, вы можете сделать эту форму довольно легко с этим свойством, используя polygon() значение:

.wrap { 
 
    width: 30%; 
 
    height: 300px; 
 
    background: #4A90E2; 
 
} 
 
.wrap div { 
 
    height: 200px; 
 
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%); 
 
      clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%); 
 
    background: url('http://i.imgur.com/5NK0H1e.jpg'); 
 
    background-size:cover; 
 
}

<div class="wrap"><div></div></div>

источник

2016-04-07 14:14:28

Изображение маска с треугольником внизу

ответ

Смежные вопросы