<div class="diamond"></div>

.diamond {
  --stars: 11;
  width: calc(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="1.125" y="15" fill="black">*</text></svg>');
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}