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.

Всем удачи!!

1 комментарий:

  1. The King Casino Hotel | Jamul Casino & Spa
    The King Casino www.jtmhub.com Hotel is herzamanindir.com/ set 1 mile south https://jancasino.com/review/merit-casino/ of Jamul Casino, 1 MPRC Blvd, Jamul, Georgia. View map. This kadangpintar casino offers a variety of gaming options 1등 사이트 including slots,

    ОтветитьУдалить