SVG rounded triangle with gradient overlay and background image

Question

I have the below code that is creating a simple rounded triangle shape with a purple gradient. I\'m trying to insert a background image that will fill the shape underneath t

Answer 1

I would go with a pure CSS solution using some transformation like below

.container {
  width:300px;
  height:300px;
  margin:auto;
  position:relative;
  overflow:hidden;
}
.container > div {
  position:absolute;
  width:100%;
  height:100%;
  border-radius:80px;
  transform-origin:top left;
  transform:translateX(-20%) rotate(-45deg);
  overflow:hidden;
}
.container > div:before {
   content:"";
   position:absolute;
   width:calc(100% * 1.4);
   height:calc(100% * 1.4);
   transform:rotate(45deg);
  transform-origin:top left;
   background:
    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
    url(https://picsum.photos/300/300?image=1069) top/cover;
}

With the container as full width:

.container {
  margin:auto;
  position:relative;
  overflow:hidden;
}
.container > div {
  width:100%;
  padding-top:100%;
  border-radius:15%;
  transform-origin:top left;
  transform:translateY(-15%) translateX(-21%) rotate(-45deg);
  overflow:hidden;
}
.container > div:before {
   content:"";
   position:absolute;
   top:0;
   left:0;
   width:calc(100% * 1.4);
   height:calc(100% * 1.4);
   transform:rotate(45deg);
   transform-origin:top left;
   background:
    linear-gradient(to top,rgba(99, 0, 255, 0.7),#251D4B),
    url(https://picsum.photos/300/300?image=1069) top/cover;
}