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

#css

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

Ответы

Ответ 1

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


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



Ответ 2

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



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}







То же но с 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)}
}







Самый нормальный вариант - программная генерация html



for(var i = 0; i<80; i++) 
  document.body.innerHTML += ``
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)}
}


Ответ 3

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



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



Ответ 4

.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%);
}