Div with a triangle at the bottom with a background image

Question

I want to create a div with a triangle at the bottom . But I need a background image on a triangle , I tried using a pseudo-element ( :after ), but it does not work.

 #homebg:after{ content:''; position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: solid 50px #fff; border-left: solid 48vw transparent; border-right: solid 48vw transparent; } 

I need the div appear as in this image with background in the triangle:

Answer 1

Triangle over regular color

If the triangle is displayed above the regular color, you can use this approach with an absolutely positioned pseudo-element:

 div{ position:relative; background:url('http://i.imgur.com/W27LCzB.jpg'); background-size:cover; min-height:100px; padding-bottom:100px; overflow:hidden; } div:after{ content:''; position:absolute; bottom:0; left:0; border-left:50vw solid #fff; border-right:50vw solid #fff; border-top:100px solid transparent; } 

 <div></div> 

The left and right parts of the triangle are hidden by the left and right borders of the pseudo-element. This is why this approach will not work on a gradient or image.

---

Triangle over image or gradient

In these cases, you can use the built-in svg with clipPath and polygon :

 body, html{ height:100%; background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center; background-size:cover; } svg{ display:block; width:100%; } 

 <svg viewbox="0 0 100 40"> <clipPath id="clip"> <polygon points="0 0 100 0 100 25 50 40 0 25" /> </clipPath> <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" width="100" height="65" clip-path="url(#clip)"/> </svg> 

There are other possible approaches to the same result. You can find it here: CSS Transparent Arrow / Triangle

Answer 2

You can use clipping mask

 div { -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%); clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%); } 

Check out this website to create your own masks.