Фигуры на CSS
Язык стилей CSS значительно упрощает создание геометрических фигур. Не нужно пользоваться фоторедакторами или задавать сложную разметку с помощью HTML. Достаточно прописать всего лишь один элемент и сделать из него сложную фигуру с помощью псевдоэлементов, рамок и теней.
Эта возможность появилась недавно, с внедрением стандарта CSS3. Причем для этого достаточно двух свойств: transform и border-radius.
Круг
Создать окружность очень просто. Для этого создается элемент div. Предположим, его id – circle.
<div id="circle"></div>
Чтобы сделать из него круг, необходимо задать желаемую ширину и высоту, а потом выставить значение border-radius на половину от width и height. А с помощью свойства background задается цвет.
Также может потребоваться добавить вендорные префиксы для поддержки старых версий браузеров.
#circle {
width: 100px;
height: 100px;
background: #7fee1d;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Квадрат
Для создания квадрата необходимо создать див с желаемым идентификатором. В нашем примере это будет square. После этого с помощью CSS задается фон, а ширина и высота делаются равными друг другу.
#square {
width: 100px;
height: 100px;
background: #f447ff;
}
Прямоугольник
Прямоугольник делается так же, как квадрат, только ширина и высота отличается друг от друга.
#rectangle {
width: 200px;
height: 100px;
background: #4da1f7;
}
Овал
Овал делается так же, как прямоугольник, только добавляется свойство border-radius, размер которого составляет половину от ширины или высоты в зависимости от направленности фигуры.
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Треугольник
Для создания треугольника нужно прописать, див, границей которой будем манипулировать с помощью CSS. Достаточно будет прописать длину каждой из сторон треугольника и задать цвет заливки.
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
Можно развернуть треугольник в обратную сторону.
Для этого заменяем свойство border-bottom на border-top.
#triangle_down {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
Можно направить треугольник влево и вправо. Для этого необходимо сделать противоположную границу больше, чем две другие стороны. Например, так.
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
Ромб
Создать ромб немного сложнее, чем треугольник, квадрат или круг. Для этого надо воспользоваться свойством transform и разместить два треугольника рядом.
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}
Трапеция
Чтобы создать трапецию, необходимо создать блок div, задать его ширину и высоту, а также размеры рамки. Левая и правая граница должна быть одинаковой величины, а нижняя больше левой и правой.
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Параллелограмм
Чтобы создать параллелограмм, необходимо сделать обычный прямоугольник, после чего к нему применить свойство transform со значением skew.
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
Звезда
Звезда рисуется с помощью сложных манипуляций с границами, применяя свойство transform и задавая стиль псевдоэлементов. Проще посмотреть сразу на код.
#star {
width: 0;
height: 0;
margin: 50px 0;
color: #fc2e5a;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #fc2e5a;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
Пятиугольник
Чтобы создать пятиугольник, необходимо прописать два элемента, которые затем соединяются. Внизу прорисовывается трапеция, после чего на нее накладывается треугольник.
#pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #277bab transparent;
}
#pentagon:before {
content: "";
height: 0;
width: 0;
position: absolute;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #277bab;
}
Нестандартные фигуры
В принципе, разные фигуры создаются с помощью комбинации указанных выше. Так можно создать почти любую нестандартную фигуру.
Например, сердце создается значительно сложнее.
#heart {
position: relative;
}
#heart:before,#heart:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Здесь применяется свойство transform-origin, позволяющее задать точку, относительно которой и будет трансформироваться элемент.
С помощью комбинации треугольника и прямоугольника можно сделать бабл для комментария.
#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
Генератор фигур CSS
Многие новички интересуются, есть ли генератор фигур CSS? Близко к этому приложение для Chrome CSS – Shack. Но на практике использовать таблицы стилей не рекомендуется для рисования фигур. Для этого есть SVG.
