CSS：旋转元素而不旋转其内部内容 - 单个元素

Question

我正试图建立波斯尼亚和黑塞哥维那的旗帜，看起来像这样。

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

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

有没有办法避免它？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

更好的主意：使用text-shadow！基本CSS：

＆＃13;

＆＃13;

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;
}

＆＃13;

<div>★</div>

＆＃13;

＆＃13;

＆＃13;

最初的想法

有点难看，但你可以在星星之间插入标签，然后使用ch - 值font-size并与tab-size和line-height一起玩。基本理念：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

quick attempt at the actual flag

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

Answer 2

＆＃13;

＆＃13;

.flag {
  position: relative;
  width: 300px;
  height: 200px;
  transform: rotate(-45deg);
}

.flag-star:before {
  font-size: 3rem;
  content:"★";
  display: inline-block;
}

.deg-1{
  transform: rotate(47deg);
}
.deg-2{
  transform: rotate(48deg);
}
.deg-3{
  transform: rotate(49deg);
}
.deg-4{
  transform: rotate(50deg);
}
.deg-5{
  transform: rotate(51deg);
}
.deg-6{
  transform: rotate(52deg);
}
.deg-7{
  transform: rotate(53deg);
}

＆＃13;

<div class="flag">
    <div class="flag-star deg-1"></div>
    <div class="flag-star deg-2"></div>
    <div class="flag-star deg-3"></div>
    <div class="flag-star deg-4"></div>
    <div class="flag-star deg-5"></div>
    <div class="flag-star deg-6"></div>
    <div class="flag-star deg-7"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

编辑：旋转.flag ::前两次前45度然后170度。

.flag {
  position: relative;
  width: 300px;
  height: 200px;
}
.flag::before {
  position: absolute;
  content: '★★★★★★★★★';
  color: black;
  font-size: 2rem;
  letter-spacing: 0.33rem;
  transform: translateY(-50%) rotate(45deg) rotate(170deg);
  top: 50%;
}

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