Image with cut out transparent triangle

Question

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.

I think your best approach would be to use photoshop such as paint.NET and save your image as a .png. Then apply your image as a `background-image` to your div. — Denis Priebe, Sep 06 '16 at 13:56

score 2 · Accepted Answer · edited May 23 '17 at 12:19

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>

Thank you very much for the effort and time. :) But unfortunately 1) Not working on wide screens (disappearing in the top of the browser), that's why I would like possibly to avoid using svg... 2) The image background inside the shape itself should be aligned to the bottom, not the shape as such. That is why I'm showing the original image in the description. The div or whatever should go in the normal DOM order. 3) It should be possible to define the cut out area with pixels units. 4) I also don't quite understand the reason of the second ``. :) But again thanks for the try! — Martin L., Sep 08 '16 at 12:43
@MartinL. I have added an approach using CSS. It should suit you better. (And sorry for the extra polygon in the svg approach, its a left over from the clipPath making) — web-tiki, Sep 09 '16 at 07:28
Again, thank you very much. That CSS approach is excelent. I never thought about the posibility to skew the div and combine it with `::after` selector. It's amazing. I guess that the `background-size: 200% auto` is leftover after tweaking. :) Again, thank you, this is just what I need. — Martin L., Sep 15 '16 at 14:07
@MartinL. yes, I removed the `background-size: 200% auto;` form the snippet. — web-tiki, Sep 20 '16 at 09:02

Image with cut out transparent triangle

1 Answers1