Рисуем флаг в CSS 3

19.06.2014 Есть такой тип трансформации в CSS-3 - skew, попробуем используя этот тип трансформации нарисовать флаг.

Для начала нужно создать html разметку :


То есть один слой, в нём два - левый и правый.

Далее пишем свойства для этих слоёв :

.bigs{
    height: 50px;
    overflow: hidden;
    width: 400px
}
.bi-left, .bi-right{
    background:#b61d1e;
    height: 100%;
    width: 80%;}
.bi-left{
    float: left;
    transform: skew(45deg);} /* задаём скос и наложение друг на друга путём float. */
.bi-right{
    transform: skew(-45deg);} /* задаём скос дива */

И получаем вот такой результат:

Так же можно добавить текст по получившемуся флагу, можно рисовать треугольники разной формы - не меняя разметки -только меняя свойства слоёв .

Например вот какую фигуру можно получить , чуть подправив два стиля :

ПОЛУЧИЛОСЬ!

Вернуться назад




X

Форма запроса регистрации

Нажимая кнопку "Отправить" вы соглашаетесь на обработку конфиденциальных данных
X

Форма заказа товара

Ваше имя*
Ваш E-mail*
Сообщение*
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*