带有切出透明三角形的图像

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，它非常简单。这是一个例子：

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>