CODEWITHSUNDEEP
cssrotationtransform
Praveen Puglia
Praveen Puglia

Reputation: 5631

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

I am trying to build the flag of Bosnia and Herzegovina which looks like this.

http://flags.fmcdn.net/data/flags/normal/ba.png

I am trying to achieve how the stars are lined up. They are laid on a 45deg tilted axis but the stars themselves aren't rotated.

The following is the bare minimum code I am trying but it rotates the stars too.

Is there a way to avoid it?

P.S - I am not allowed to add another element to 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>

Upvotes: 4

Views: 1114

Answers (3)

Ana
Ana

Reputation: 37169

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

Original idea

Kind of ugly, but you could put tabs between the stars, then use a ch-valued font-size and play with tab-size and line-height. Basic idea:

.star {
	font: 6.5ch/.5 monospace;
	tab-size: .75ch;
}
<pre class='star'>★
	★
		★
			★
				★
					★
						★
							★
								★</pre>

quick attempt at the actual flag

Note that it only seems to work in Chrome. ☹

Upvotes: 2

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1044

EDIT: Rotate .flag::before two time 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>

Upvotes: 1

Akash Bhardwaj
Akash Bhardwaj

Reputation: 39

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

Upvotes: 1

Related Questions