CSS: Rotating an Element Without Rotating Its Inner Content - Single Element

Question

I am trying to build a flag of Bosnia and Herzegovina that looks like this.

I'm trying to understand how the stars lined up. They fit on a 45-degree inclined axis, but the stars themselves do not rotate.

Below is the minimum minimum code I'm trying, but it also rotates the stars.

Is there any way to avoid this?

PS - I am not allowed to add another element to the 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>

Run codeHide result

Answer 1

Best idea: use text-shadow! Basic 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>

Run codeHide result

---

Original idea

, , ch - font-size tab-size line-height. :

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

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

Hide result

quick attempt at the actual flag

, Chrome. ☹

Answer 2

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

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

Hide result

Answer 3

EDIT: Rotate .flag :: up to two times, first 45deg, then 170deg.

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

Run codeHide result