Martin L. Martin L. - 2 months ago 13
CSS Question

Image with cut out transparent triangle

I was wondering if this is possible. I was trying to achieve it with svg and 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>





But it's still not what I want and I'm sure there is more elegant and simpler solution. The image should have a bottom alignment. The cut out section should be sized in pixels and transparent so that content underneath is visible. See the attached image below.

Image with cut out transparent triangle

Answer

With svg clipPath, it is pretty staightforward. Here is an example :

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>

If you want to use CSS, you can use the same kind of approach used for Transparent arrow/triangle and skew two divs with the image. Here is an example:

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

Comments