div with triangle at the bottom with background image
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
You can use a 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%);
}
Have a look at this website to generate your own masks.