<div class="triangle"></div> 
<div class="triangle" style="--r:40px;"></div>
<div class="triangle" style="--r:10px;"></div> 

.triangle {
  --r:20px; /* border radius */

  width: 200px;
  aspect-ratio: 1/cos(30deg);
  --_g:calc(tan(60deg)*var(--r)) bottom var(--r),red 98%,#0000 101%;
  -webkit-mask:
    conic-gradient(from -30deg at 50% calc(200% - 3*var(--r)/2),#000 60deg,#0000 0)
     0 100%/100% calc(100% - 3*var(--r)/2) no-repeat,
    radial-gradient(var(--r) at 50% calc(2*var(--r)),#000 98%,#0000 101%),
    radial-gradient(var(--r) at left  var(--_g)),
    radial-gradient(var(--r) at right var(--_g));
  clip-path: polygon(50% 0,100% 100%,0 100%);
  background: linear-gradient(45deg,#FA6900,#C02942);
}

body {
  display: flex;
  gap: 20px;
}