Maske Bild mit einem Dreieck an der Unterseite

Question

Ich versuche herauszufinden, wie man ein Div mit einer eckigen Form am besten so maskieren - wenn das obere div in diesem Fall ein Hintergrundbild sein wird, und beide divs wären 100% Breite:

ich habe viele Tutorials zu sehen gibt, wie ein Bild mit einer Kreisform zu maskieren, aber keiner, wie Sie den Rand eines div wie der rote Bereich maskieren würden. Ich weiß, dass es einen besseren Weg geben muss, als dies mit Bitmaps zu tun, aber ich bin ratlos.

Wäre es am besten, dies mit Clip-Pfad oder SVG zu tun? Ich bin nicht so besorgt über ältere Browser, wenn das Ergebnis ist, dass sie die roten/blauen Divs durch eine flache Linie getrennt sehen. Der gesamte rote Bereich wird ein Hintergrundbild sein, also wenn alte Browser diese eckige Grenze verpassen, sei es so.

Answer 1

können Sie verwenden transform (skew und rotate) ohne die Verwendung von clip-path diesen Effekt zu erzielen, die

geringe Unterstützung hat

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

Hintergrundbilder, sollten Sie top:50% auf beide gelten die 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

Wenn Sie sich mit der clip-path Eigenschaft planen, sollten Sie beachten, dass browser support im Moment als CSS Masking Module Level 1 sehr niedrig ist, hat den Status „Kandidat recomendation“.

Daher können Sie diese Form machen ziemlich leicht mit dieser Eigenschaft mit dem polygon() Wert:

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