re: Daily Challenge #2 - String Diamond VIEW POST



.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:


Wow amazing one again! I don't think it's cheating at all, just a creative solution to the problem!


Yesterday's solution was definitely more cheating than this one.

code of conduct - report abuse