Рисуем флаг в CSS 3
Для начала нужно создать 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);} /* задаём скос дива */
И получаем вот такой результат:
Так же можно добавить текст по получившемуся флагу, можно рисовать треугольники разной формы - не меняя разметки -только меняя свойства слоёв .
Например вот какую фигуру можно получить , чуть подправив два стиля :