Фигуры на 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.