7

Подскажите как нарисовать в css российский флаг

2

4 ответа 4

13

Вариант с анимацией

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)}
}

6
  • Прикольно смотрится :)
    – Qwertiy
    20 мая 2019 в 19:36
  • @Qwertiy да, спасибо, и даже пикселизация не сильно вредит, если увеличить амплитуду 20 мая 2019 в 19:37
  • В последнем со срезом какой-то косяк в начале анимации.
    – Qwertiy
    20 мая 2019 в 22:34
  • @Qwertiy он во всех вариантах, в последнем больше элементов по этому заметнее.. 20 мая 2019 в 22:53
  • Я исправил - не против?
    – Qwertiy
    20 мая 2019 в 22:58
12

Википедия говорит:

  • Отношение ширины флага к его длине составляет 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>

3
  • Плюсанул за интересный способ на чистом CSS без calc() вычислить высоту в 1,5 раза меньше ширины
    – stckvrw
    21 мая 2019 в 18:54
  • какой-то забавный эффект, белая полоса кажется шире на пару пикселей за счет тени
    – Grundy
    21 мая 2019 в 18:54
  • @Grundy, да, тоже заметил :)
    – Qwertiy
    21 мая 2019 в 23:44
7

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

2
  • Похоже только я полез за цветами в википедию?) Кстати, ответ почти такой же.
    – Qwertiy
    20 мая 2019 в 16:21
  • @Qwertiy, видимо да) плюс Вам за старания) Мы люди простые, через пипетку цвета берём)
    – meine
    20 мая 2019 в 16:22
7

Например вот так:

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

1
  • Цвета не те. И размеры можно немного поменять.
    – Qwertiy
    20 мая 2019 в 16:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.