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 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 :

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.

Answer 2

We can do this with only linear-gradient and mask. You can adjust the height you want.

div {
  --triangle-height: 100px; /* you can change this */
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat, 
          linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat, 
          linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  width: 500px;
  height: 400px;
  background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
  background-repeat: no-repeat;
}

<div></div>

By changing the variable and adjusting width: 100%

div {
  --triangle-height: 200px; /* you can change this */
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat, 
          linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat, 
          linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  width: 100%;
  height: 400px;
  background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
  background-repeat: no-repeat;
}

<div></div>