<div class="triangle"></div>
<div class="triangle" style="--b: 20px"></div>
<div class="triangle" style="--b: 5px"></div>

.triangle {
  --b: 10px;
  width: 200px;
  aspect-ratio: 1;
  clip-path: 
    polygon(
      /* outer points */
      0 100%,0 0,100% 100%,0 100%,
      /* inner points */
      var(--b) calc(100% - var(--b)),calc(100% - var(--b)/tan(22.5deg)) calc(100% - var(--b)),var(--b) calc(var(--b)/tan(22.5deg)),var(--b) calc(100% - var(--b))
    );
  background: linear-gradient(90deg,red,lightblue);
}

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