Discussion on: Daily Challenge #2 - String Diamond

View post

CSS

.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%);
}

Some people will claim that I am cheating with this one; and they are probably right... but it was fun to develop and it kind of works (although only with odd numbers 😭). The idea is:

Create a SVG image that shows an asterisk with text.
Put that SVG as an inline background image for an element.
Clip the element to only show a diamond shape (using clip-path).
Define a CSS variable to specify the number of stars in the middle of the diamond.
Knowing the size of the SVG image, use the CSS variable to calculate the height and width of the element.

Here there is a working demo on Codepen: