圖像的切出透明三角形

Question

我想知道，這是可能的。我試圖用svg和clipPath來實現它。 （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>

但它仍然不是我想要的，我敢肯定有更優雅和簡單的解決方案。圖像應該有一個底部對齊。切出部分的大小應爲像素且透明，以便下方的內容可見。請參閱下面的附圖。

Answer 1

使用SVG clipPath，它是相當staightforward。這裏有一個例子：

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>

如果你想使用CSS，你可以用同一種方法用於Transparent arrow/triangle和傾斜兩個div與圖像。這裏有一個例子：

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