adeade adeade - 6 months ago 65
HTML Question

div with triangle at the bottom with background image

I want to make a div, with a triangle at the bottom.
But I need the background image on the triangle to appear, I've tried using a pseudo element (:after) but it doesn't 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 to make the div appear like in this image with the background in the triangle :
div with background image and a full width triangle at the bottom

Answer

Triangle over a plain color

If the triangle is displayed over a plain 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. That is why this approach won't work over a gradient or image.


Triangle over an image or gradient

In these cases, you can use an inline svg with clipPath and a polygon element :

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 for the same result. You can find some here : CSS Transparent arrow/triangle