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

<div class="container">
  <div></div>
</div>

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

<div class="container">
  <div></div>
</div>

Answer 2

Use the <path> as a <mask>. Then use that <mask> on a your <image>, then use that same <mask> on a <rect> that sits on top. Finally fill the <rect> with your <gradient>.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800">
  <defs>
     <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="gradient">
       <stop stop-color="#6300FF" stop-opacity="0.7" offset="0%"></stop>
       <stop stop-color="#251D4B" offset="100%"></stop>
     </linearGradient>
    <mask id="mask">
      <path d="M812.532 489.667L1306.8 -4.60034H-106L388.268 489.667C505.425 606.825 695.374 606.825 812.532 489.667Z" fill="#C4C4C4"/>
    </mask>
  </defs>
  <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/1/11/Varkala_Beach_High_Res.jpg" x="0" y="0" width="1200" height="800" mask="url(#mask)" />
  <rect width="1400" height="742" mask="url(#mask)" fill="url(#gradient)"></rect>
</svg>