CSS - Флаг Израиля



Флаг Израиля. Вроде всё просто, две полосы на белом фоне и звезда Давида. С фоном всё было просто, а вот относительно звезды пришлось применить один фокус. Треугольники и CSS не самые лучшие друзья.
Размеры и цвет я взял просто с картинки флага. Так-что размеры могут быть немного странноватые и не соответствовать стандартному флагу. Но, это не главное.

Задаём размеры и рисуем полоски на белом фоне:
.israel-flag { width: 900px; height: 650px; background: linear-gradient(to bottom, transparent 9.5%, #0035B9 9.5% 25%, transparent 25% 75%, #0035B9 75% 90.5%, transparent 90.5%), #ffffff; border: solid 1px black; }

Затем задаём псевдо-элемент с контекстом самой звезды:
.israel-flag::before { content: "✡"; color: #0035B9; font-size: 434px; }

Спасибо юникоду который делает нашу жизнь проще!!

Затем ставим звезду в середину флага:
.israel-flag { text-align: center; line-height: 660px; }

text-align: center - выравнивает текст по центру горизонтальной линии. line-height задаёт высоту строки и сам текст выравнивает по середине этой строки. В идеале, высота строки должна быть ровна высоте флага. Но, у звезды не равные отступы сверху и снизу, так-что пришлось замарочиться.

Весь код:
.israel-flag { text-align: center; line-height: 660px; width: 900px; height: 650px; background: linear-gradient(to bottom, transparent 9.5%, #0035B9 9.5% 25%, transparent 25% 75%, #0035B9 75% 90.5%, transparent 90.5%), #ffffff; border: solid 1px black; } .israel-flag::before { content: "✡"; color: #0035B9; font-size: 434px; }

See the Pen Israel Flag by Sergey Zlomorda Drushchits (@Zlomorda) on CodePen.

Всем удачи!!

Комментариев нет:

Отправка комментария