Я пытаюсь построить флаг Боснии и Герцеговины, который выглядит так.CSS: вращение элемента без поворота его внутреннего содержимого - Single Element

Я пытаюсь добиться, как звезды выстроились. Они укладываются на 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>

источник

2017-02-21 Praveen Puglia

Я рекомендовал бы использовать каждую звезду как отдельный элемент DOM, а затем завернуть его в DIV, повернуть DIV и повернуть назад только звезды. Ах, извините, не заметил, что вы не можете добавить какой-либо элемент dom. Это отстой. Я дам вам знать, если я что-то придумаю. –

Лучше идея: использовать 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 и line-height. Основная идея:

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

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

`quick attempt at the actual flag`

Обратите внимание, что это только кажется, работает в Chrome. ☹

источник

2017-02-21 10:04:46 Ana

Это будет решение, но многие моменты сломать. Хотелось бы, чтобы что-то в css-трансформировалось, чтобы сделать это изначально. :(Я собираюсь попробовать это в любом случае. –

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

источник

2017-02-21 09:16:29

Я упомянул, что не могу добавить больше элементов в DOM. –

РЕДАКТИРОВАТЬ: Повернуть .flag :: до двух раз сначала 45deg, затем 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>

источник

2017-02-21 10:43:13

что бы это сделало, это повернуть весь флаг. Флаг должен оставаться таким, каким он есть .. это массив звезд, которые должны вращаться. –

@PraveenPuglia Затем вам нужно повернуть .flag: : до двух раз –

Удивительно. Можете ли вы объяснить, почему это работает? У меня есть предположение, но давайте посмотрим, все ли это: D –

CSS: вращение элемента без поворота его внутреннего содержимого - Single Element

ответ

Оригинальная идея

quick attempt at the actual flag

Смежные вопросы

`quick attempt at the actual flag`