Подскажите как нарисовать в css российский флаг
4 ответа
Википедия говорит:
- Отношение ширины флага к его длине составляет 2:3
- Рекомендуемые цвета флага: #FFFFFF #0039A6 #D52B1E
Ну а дальше делаем div с градиентом:
div {
width: 12em;
background: linear-gradient(to bottom, #FFFFFF 33.333%, #0039A6 33.333%, #0039A6 66.667%, #D52B1E 66.667%);
box-shadow: 0 0 5px 0 #666;
}
div::before {
content: "";
display: block;
padding-top: 66.667%;
}
<div></div>
Вариант с анимацией
body {
background-color: #ddd;
}
a {
display: inline-block;
background: linear-gradient(to bottom,#FFFFFF 33%, #0039A6 34%,#0039A6 66%,#D52B1E 67%);
animation: 1s flag infinite linear both;
height: 120px;
width: 20px;
}
@keyframes flag {
0% {transform:translate(0, 0)}
50% {transform:translate(0, 2px)}
100% {transform:translate(0, 0)}
}
a:nth-child(2){animation-delay:0.1s}
a:nth-child(3){animation-delay:0.2s}
a:nth-child(4){animation-delay:0.3s}
a:nth-child(5){animation-delay:0.4s}
a:nth-child(6){animation-delay:0.5s}
a:nth-child(7){animation-delay:0.6s}
a:nth-child(8){animation-delay:0.7s}
a:nth-child(9){animation-delay:0.8s}
<a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a>
То же но с css переменными:
body {
background-color: #ddd;
}
a {
display: inline-block;
background: linear-gradient(to bottom,#FFFFFF 33%, #0039A6 34%,#0039A6 66%,#D52B1E 67%);
animation: 1s flag infinite ease-in-out both;
animation-delay: calc(var(--n) * 0.05s);
height: 60px;
width: 4px;
}
@keyframes flag {
0% {transform:translate(0, -1px)}
50% {transform:translate(0, 1px)}
100% {transform:translate(0, -1px)}
}
<a style="--n:1"></a><a style="--n:2"></a><a style="--n:3"></a><a style="--n:4"></a><a style="--n:5"></a><a style="--n:6"></a><a style="--n:7"></a><a style="--n:8"></a><a style="--n:9"></a><a style="--n:10"></a><a style="--n:11"></a><a style="--n:12"></a><a style="--n:13"></a><a style="--n:14"></a><a style="--n:15"></a><a style="--n:16"></a><a style="--n:17"></a><a style="--n:18"></a>
Самый нормальный вариант - программная генерация html
for(var i = 0; i<80; i++)
document.body.innerHTML += `<a style="--n:${i}">`
body {
background-color: #ddd;
}
a {
display: inline-block;
background: linear-gradient(to bottom, #fff 33%, #04a 34%, #04a 66%, #d32 67%);
animation: 0.8s flag infinite ease-in-out both;
animation-delay: calc(var(--n) * 0.01s);
height: 120px;
width: 2px;
}
@keyframes flag {
0% {transform:translate(0, -2px)}
50% {transform:translate(0, 2px)}
100% {transform:translate(0, -2px)}
}
-
-
@Qwertiy да, спасибо, и даже пикселизация не сильно вредит, если увеличить амплитуду 20 мая 2019 в 19:37
-
-
@Qwertiy он во всех вариантах, в последнем больше элементов по этому заметнее.. 20 мая 2019 в 22:53
-
.flag {
height: 60px;
width: 90px;
border: 1px solid black;
background-image: linear-gradient(#fff 33.3%, #00f 33.3% 66.6%, #f00 66.6% 100%);
}
<div class="flag"></div>
Например вот так:
.ru_flag{
width:72px;
height:48px;
background:red;
box-shadow:0 0 5px 0 #666;
}
.ru_flag:before,
.ru_flag:after{
display:block;
content:'';
width:100%;
height:33.33333%;
background:white;
}
.ru_flag:after{
background:blue;
}
<div class="ru_flag"></div>