<div class="triangle"></div>
.triangle {
  --stars: 10;
  width: calc(2 * var(--stars) * 10px);
  height: calc((var(--stars)) * 15px);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="15px" viewBox="0 0 10 15"><text x="5" y="12" fill="black" dominant-baseline="middle" text-anchor="middle">*</text></svg>');
  background-position: top center;
  clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.