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

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;
}

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;
}