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

Question

Не понятно, для какой задачи... пара примеров - - https://jsfiddle.net/OPTlMUS/6fngbx9s/ — OPTIMUS PRIME, May 20 '19 at 15:16

score 13 · Answer 1 · edited May 20 '19 at 22:58

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

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 да, спасибо, и даже пикселизация не сильно вредит, если увеличить амплитуду — Stranger in the Q, May 20 '19 at 19:37
В последнем со срезом какой-то косяк в начале анимации. — Qwertiy, May 20 '19 at 22:34
@Qwertiy он во всех вариантах, в последнем больше элементов по этому заметнее.. — Stranger in the Q, May 20 '19 at 22:53
@Qwertiy да, спасибо, я не подумал про animation fill mode — Stranger in the Q, May 20 '19 at 23:04

score 12 · Answer 2 · answered May 20 '19 at 16:17

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>

answered May 20 '19 at 16:17

Qwertiy

123,725

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

stckvrw · Answer 3 · 2019-05-21T18:44:47.320

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>

edited May 21 '19 at 18:44

answered May 20 '19 at 15:21

stckvrw

1,445

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

score 7 · Answer 4 · answered May 20 '19 at 16:19

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>

answered May 20 '19 at 16:19

meine

7,394

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

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

4 Answers4