Флаг Израиля. Вроде всё просто, две полосы на белом фоне и звезда Давида. С фоном всё было просто, а вот относительно звезды пришлось применить один фокус. Треугольники и 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.
Всем удачи!!
Комментариев нет:
Отправить комментарий