CSS shape

by anoopsuda

HTML

<div class="polygon"></div>
<div class="polygon invert"></div>
<div class="polygon invert" style="--d: 40px;width: 120px"></div>g

CSS

.polygon {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  display: inline-block;
  clip-path: shape(evenodd from 94.41% 40.32%,curve to 94.41% 59.68% with 100% 50%,line to 80.59% 83.62%,curve to 63.82% 93.3% with 75% 93.3%,line to 36.18% 93.3%,curve to 19.41% 83.62% with 25% 93.3%,line to 5.59% 59.68%,curve to 5.59% 40.32% with 0% 50%,line to 19.41% 16.38%,curve to 36.18% 6.7% with 25% 6.7%,line to 63.82% 6.7%,curve to 80.59% 16.38% with 75% 6.7% var(--i,) ) content-box;
  background: linear-gradient(60deg in hsl,#C02942,#ECD078);
}
.invert {
  --d: 20px;
  padding: var(--d);
  --i: ,move to calc(-1*var(--d)) calc(-1*var(--d)),hline to calc(100% + var(--d)),vline to calc(100% + var(--d)),hline to calc(-1*var(--d));
  width: 160px;
}