CSS - Флаг Норвегии

А вот здесь пришлось попотеть. Вроде нет ничего страшного или сложного, даже ежу понятно, что больше одного дива и не надо. Но вот liner-gradient задал загадку которую пришлось разгадать.

Для отрисовки флага Норвегии надо использовать два вектора для линейного градиента:
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; }

Результат:

Всего хорошего!!