<div class="star"></div>
<div class="star border-only"></div>
.star {
  width: 200px;
  aspect-ratio:1;
  display :inline-block;
  margin: 10px;
  background: linear-gradient(gold,lightblue);
  clip-path: polygon(79.39% 90.45%,50.00% 69.00%,20.61% 90.45%,31.93% 55.87%,2.45% 34.55%,38.83% 34.63%,50.00% 0.00%,61.17% 34.63%,97.55% 34.55%,68.07% 55.87%);
}
.star + .star {
  clip-path: polygon(79.39% 90.45%,50.00% 69.00%,20.61% 90.45%,31.93% 55.87%,2.45% 34.55%,38.83% 34.63%,50.00% 0.00%,61.17% 34.63%,97.55% 34.55%,68.07% 55.87%,79.39% 90.45%,50.00% 69.00%,50.00% 63.68%,71.16% 79.12%,63.01% 54.23%,84.24% 38.88%,58.04% 38.93%,50.00% 14.00%,41.96% 38.93%,15.76% 38.88%,36.99% 54.23%,28.84% 79.12%,50.00% 63.68%,71.16% 79.12%);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.