图像与切出透明三角形

Question

我想知道这是否可行。我试图用svg和clipPath实现它。 （jsfiddle example）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但它仍然不是我想要的，我确信有更优雅，更简单的解决方案。图像应具有底部对齐。剪切部分的大小应为像素且透明，以便下方的内容可见。请参见下图。

Answer 1

使用svg clipPath，它非常明确。这是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您想使用CSS，您可以使用与Transparent arrow/triangle相同的方法，并将两个div与图像对齐。这是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;