А вот здесь пришлось попотеть. Вроде нет ничего страшного или сложного, даже ежу понятно, что больше одного дива и не надо. Но вот liner-gradient задал загадку которую пришлось разгадать.
Для отрисовки флага Норвегии надо использовать два вектора для линейного градиента:
1 - Снизу вверх
2 - Справа налево
1 - Снизу вверх
2 - Справа налево
Можно и наоборот... можно еще градусом задать направление... там вообще много чего можно.
А вот для того, что бы всё получилось как надо, пришлось разгадать одну маленькую, но выжную загадку.
При отрисовки нескольких градиентов, они накладываются "вглубь" картинки. Тоесть то, что написано первым - будет выше всех остальных слоёв.
Всё. Теперь можно рисовать.
Пропорции и цвета были найдены в интернете. Задаём размеры самого флага и обводим рамочкой:
.norway-flag {
width: 440px;
height: 320px;
border: solid 1px black;
}
Затем начинаем мучать полосочки на красном фоне (фон должен быть в самом конце):
linear-gradient(to right,
transparent 140px,
#002868 140px 180px,
transparent 180px),
linear-gradient(to bottom,
transparent 140px,
#002868 140px 180px,
transparent 180px),
linear-gradient(to bottom,
transparent 120px,
#ffffff 120px 200px,
transparent 200px),
linear-gradient(to right,
transparent 120px,
#ffffff 120px 200px,
transparent 200px),
#ef2b2d;
Полный "код":
.norway-flag {
width: 440px;
height: 320px;
background:
linear-gradient(to right,
transparent 140px,
#002868 140px 180px,
transparent 180px),
linear-gradient(to bottom,
transparent 140px,
#002868 140px 180px,
transparent 180px),
linear-gradient(to bottom,
transparent 120px,
#ffffff 120px 200px,
transparent 200px),
linear-gradient(to right,
transparent 120px,
#ffffff 120px 200px,
transparent 200px),
#ef2b2d;
border: solid 1px black;
}
Результат:
Всего хорошего!!
Комментариев нет:
Отправить комментарий