Altta bir üçgen ile Maske resmi

Question

Bir div şeklindeki açısal şeklin nasıl en iyi şekilde maskeleneceğini anlamaya çalışıyorum - bu durumda üst div arka plan görüntüsü ise ve her iki div % 100 genişliği:

oraya bir daire şeklinde bir görüntü maskelemek için nasıl öğreticiler bir sürü gördüm, ama kırmızı alanı gibi bir div sınır maske nasıl ise hiç yoktur. Biliyorum ki bunu bitmaplerle yapmaktan daha iyi bir yol olmalı, ama kaybettim.

Bunu klip-yolu veya SVG ile yapmak en iyisi olur mu? Sonuçta, eski tarayıcılarla ilgili endişelerim yok, sonuçta düz bir çizgi ile ayrılmış kırmızı/mavi div'lar görüyorlarsa. Tüm kırmızı alan bir arka plan görüntüsü olacak, bu yüzden eski (er) tarayıcılar o açısal kenarlıktan kaçarsa, öyle olsun.

Answer 1

Düşük destek

.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>

arka plan resimleri için

, üzerinde top:50% uygulamalıdır sahiptir clip-path kullanılmadan bu etkiyi elde etmek için transform (skew ve rotate) kullanabilir hem 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>

Answer 2

Eğer clip-path özelliğini kullanmayı planlıyorsanız, sen browser supportCSS Masking Module Level 1 olarak şu anda çok düşük olduğuna dikkat etmelidir "aday recomendation" statüsüne sahiptir.

nedenle, polygon() değerini kullanarak bu özelliğiyle oldukça kolay bu şekli yapabilirsiniz: Bir arka plan resmi kullanarak beni sınırlayacak gibi görünüyor olsa

.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>