Bild mit ausgeschnittenem transparentem Dreieck

Question

Ich habe mich gefragt, ob das möglich ist. Ich habe versucht, es mit Svg und ClipPath zu erreichen. (jsfiddle example)

body { background-color: #e0e0e0;margin: 0px;width: 100%;height: 100%; } 
 
#img-1 { clip-path: url(#clip-shape); }

<div id="image-wrapper" style="overflow: hidden; width: 100%; height: 150px;"> 
 
    <div style="width: 100%; height: 100%;"> 
 
    <svg id="image-svg" viewBox="0 0 100 100" height="100%" width="100%" preserveAspectRatio="xMinYMin slice"> 
 
     <image id="img-1" class="svg-image" width="100%" height="100%" xlink:href="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg"></image> 
 

 
     <svg id="svg-defs" viewBox="0 0 100 100" height="100%" width="100%"> 
 
     <defs> 
 
      <clipPath id="clip-shape"> 
 
      <polygon points="0 0, 40 0, 50 10, 60 0, 100 0, 100 500, 0 500"></polygon> 
 
      </clipPath> 
 
     </defs> 
 
     </svg> 
 
    </div> 
 
</div>

Aber es ist noch nicht das, was ich will, und ich bin sicher, es elegante und einfachere Lösung ist. Das Bild sollte eine untere Ausrichtung haben. Der ausgeschnittene Bereich sollte in Pixel und transparent sein, so dass der darunter liegende Inhalt sichtbar ist. Siehe das angehängte Bild unten.

Answer 1

Mit svg clipPath ist es ziemlich staightforward. Hier ein Beispiel:

div { 
 
    position: relative; 
 
} 
 
svg { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis enim ultricies, ultricies arcu in, pharetra libero. Cras vel venenatis arcu. Nullam sem massa, semper at mauris a.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis enim ultricies, ultricies arcu in, pharetra libero. Cras vel venenatis arcu. Nullam sem massa, semper at mauris a.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis enim ultricies, ultricies arcu in, pharetra libero. Cras vel venenatis arcu. Nullam sem massa, semper at mauris a, tempor dictum lorem. Proin sit amet nunc vitae enim tempor rutrum vitae vel sem. Fusce lobortis velit sapien, vitae convallis ipsum ultricies ac. Donec tristique maximus finibus. Pellentesque tortor massa, ultricies quis rhoncus sit amet, luctus ac lorem. Donec eget metus fringilla, dignissim tellus ut, varius lacus. Etiam eu pulvinar est, vitae hendrerit est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin tristique congue nisi at tincidunt. Cras sollicitudin tortor nulla, ut euismod diam pulvinar vitae. Fusce accumsan metus eget justo tincidunt porta. Morbi dictum a neque ut blandit.</p> 
 
    <svg id="svg-defs" viewBox="0 0 100 30"> 
 
    <defs> 
 
     <clipPath id="clip-shape"> 
 
     <polygon points="0 0, 40 0, 50 10, 60 0, 100 0, 100 500, 0 500"></polygon> 
 
     </clipPath> 
 
    </defs> 
 
    <image id="img-1" class="svg-image" width="100" height="50" clip-path="url(#clip-shape)" xlink:href="http://www.strayshots.com/images/Sunset-Cliffs-1.jpg"></image> 
 
    </svg> 
 
</div>

Wenn Sie CSS verwenden möchten, können Sie die gleiche Art von Ansatz für Transparent arrow/triangle verwendet verwenden und Skew zwei divs mit dem Bild. Hier ein Beispiel:

.wrap{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    padding:10px; 
 
} 
 
.tr{ 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; height:100px; 
 
    transform:skewX(50deg); 
 
    overflow:hidden; 
 
} 
 
.tr::after{ 
 
    content:''; 
 
    position:absolute; 
 
    bottom:0; left:50%; 
 
    width:100%; height:100%; 
 
    background: url('http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg') bottom no-repeat; 
 
    background-size:100% auto; 
 
    transform:skewX(-50deg); 
 
} 
 
.trl{ 
 
    right:50%; 
 
} 
 
.trr{ 
 
    left:50%; 
 
    transform:skewX(-50deg); 
 
} 
 
.trr::after{ 
 
    transform:skewX(50deg); 
 
    right:50%; left:auto; 
 
}

<div class="wrap"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis enim ultricies, ultricies arcu in, pharetra libero. Cras vel venenatis arcu. Nullam sem massa, semper at mauris a.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis enim ultricies, ultricies arcu in, pharetra libero. Cras vel venenatis arcu. Nullam sem massa, semper at mauris a.</p> 
 
    <div class="tr trl"></div><div class="tr trr"></div> 
 
</div>