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.
CSS
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:
Here there is a working demo on Codepen:
Good job! :)
Wow amazing one again! I don't think it's cheating at all, just a creative solution to the problem!
Thanks!
Yesterday's solution was definitely more cheating than this one.
Amazing! You are a CSS master!