Британский флаг

Оригинал: http://www.cssplay.co.uk/menu/flag

Попробуем нарисовать британский флаг при помощи CSS без графических рисунков.

Сначала выводим контейнер для флага:


.flag
{
    width:480px;
    height:240px;
    background:#cf142b;
    position:relative;
    border:1px solid #000;
}

Далее определяем позицию для верхнего белого прямоугольника:


.topw
{
    width:0;
    height:0;
    border-top:111px solid #fff;
    border-left:222px dashed transparent;
    border-right:222px dashed transparent;
}

Задаем позицию для левого белого прямоугольника:


<div class="flag">
<div class="topw"></div>
<div class="leftw"></div>
</div>

Затем для правого белого прямоугольника:


<div class="flag">
<div class="topw"></div>
<div class="leftw"></div>
<div class="rightw"></div>
</div>

Код смотрите в исходниках.

Нижний белый прямоугольник:

Теперь задаем позицию для синих треугольников (верхнего, левого, правого и нижнего):

Левый синий:

Правый синий:

Нижний синий:

Далее проводим горизонтальную красно-белую полосу:

Теперь рисуем вертикальную бело-красную полосу до середины флага (верхняя часть):

И, наконец, выводим красно-белую вертикальную полосу снизу:

Теперь осталось внести последние штрихи. Необходимо добавить


<!DOCTYPE html>

И дополнительное правило


.flag div
{
    overflow:hidden;
}

Британский флаг

Реклама