JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="triangle">mask</div>

CSS

/* HTML: <div class="triangle"></div> */
.triangle {
  --r:30px; /* border radius */

  width: 180px;
  aspect-ratio: 1/cos(30deg);
  -webkit-mask:
    linear-gradient(0deg,#0000 calc(3*var(--r)/2),#000 0),
    radial-gradient(var(--r) at 50% calc(100% - 2*var(--r)),#000 98%,#0000 101%);
  clip-path: polygon(50% 100%,100% 0,0 0);
  background: linear-gradient(45deg,#FA6900,#C02942);
}