div with triangle at the bottom with background image

Question

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 us

Answer 1

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.