CSS : Rotate an element without rotating its inner content - Single Element

Question

我正在尝试制作看起来像这样的波斯尼亚和黑塞哥维那国旗。

我正在努力实现星星的排列方式。它们位于 45 度倾斜轴上，但星星本身没有旋转。

以下是我正在尝试的最低限度代码，但它也会旋转星星。

有什么办法可以避免吗？

P.S - 我不允许向 DOM 添加另一个元素。

.flag {
  position: relative;
  width: 300px;
  height: 200px;
}

.flag::before {
  position: absolute;
  content: '★★★★★★★★★';
  color: black;
  font-size: 3rem;
  letter-spacing: 0.33rem;
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
}

<div class="flag"></div>

Answer 1

更好的主意:使用 text-shadow!基本 CSS:

div {
  font-size: 5em;
  text-shadow: .5em .5em, 1em 1em, 1.5em 1.5em, 2em 2em, 2.5em 2.5em, 3em 3em, 3.5em 3.5em, 4em 4em;
}

<div>★</div>

---

原创想法

有点丑，但你可以在星星之间放置制表符，然后使用 ch 值的 font-size 并使用 tab-size 和 行高。基本思路:

.star {
	font: 6.5ch/.5 monospace;
	tab-size: .75ch;
}

<pre class='star'>★
	★
		★
			★
				★
					★
						★
							★
								★</pre>

quick attempt at the actual flag

请注意，它似乎只适用于 Chrome。 ☹