<div class="triangle"></div>
<div class="triangle" style="--r:30px;background:conic-gradient(at 30% 20%,#ECD078,#C02942)"></div>
<img class="triangle" style="--r:50px;" src="https://picsum.photos/id/1015/300/300">
<div class="triangle" style="--r:73px;background: radial-gradient(#490A3D,#E97F02)"></div>

@property --r{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

.triangle {
  --r: 20px;    /* the radius */
  width: 250px; /* the size */
  
  aspect-ratio: 1.15;
  background: linear-gradient(45deg,#4ECDC4,#C7F464);
  clip-path: polygon(50% 0,100% 100%,0 100%);
  --_g1: #0000 calc(3*var(--r)/2),#000 0;
  --_g2: calc(1.7*var(--r)) bottom var(--r),#000 97%,#0000;
  --_m:
    radial-gradient(var(--r) at right var(--_g2)),
    radial-gradient(var(--r) at left  var(--_g2)),
    radial-gradient(var(--r) at 50% calc(2*var(--r)),#000 97%,#0000),
    linear-gradient(180deg,var(--_g1)) 50%  0   /100% 50%,
    linear-gradient( 60deg,var(--_g1)) 0    100%/51%  51%,
    linear-gradient(-60deg,var(--_g1)) 100% 100%/51%  51%;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  cursor: pointer;
  transition: --r .5s;
}
img {
  object-fit:cover;
}
.triangle:hover {
  --r: 8px!important;
}


body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  background: #f8f8f8;
}