В статье рассмотрена методика создания треугольных фигур без использования изображений на чистом CSS.
Для каждого уважающего себя веб-мастера важно владеть приемами CSS для создания особого дизайна сайта, и очень круто уметь делать это все без использования картинок и элементов, созданных в графических редакторах. Это оптимизирует работу ресурса, снижая нагрузку на сервер. Сегодня будет рассмотрен метод создания треугольных элементов.
Преимущества метода
В зависимости от фантазии и умений специалиста, можно перечислить множество способов создания элемента треугольной формы. Однако стоит этот вопрос рассматривать с точки зрения оптимизации функционирования веб-ресурса. Из этого следует, что чем проще решение - тем лучше будет работать сайт с точки зрения технических особенностей. Также простые решения, основанные на свойствах CSS, способствуют уменьшению риска создания не валидного кода.
Для справки отметим, что треугольные объекты могут создаваться в графических редакторах и вставляться в код в виде изображения. Также треугольный знак присутствует в наличии списка спецсимволов HTML. Треугольники еще могут быть нарисованы посредством тега canvas или через среду SVG.
Также использование комбинаций простых фигур позволяет создать сложные фигуры и даже картинки. Современные тенденции развития веб-дизайна показывает, что в настоящее время очень ценятся ресурсы в стиле 2-D с необычным представлением элементов оформления. Это еще одна причина овладеть методикой создания треугольников через свойства CSS.
Суть метода
Мы рассмотрим, простой способ создания треугольных блоков, который основывается на свойстве border. При правильном обращении, указанное свойство разделит блок на равные треугольники с одинаковыми углами. Рассмотрим пример кода
CSS
.trigon { border-color: #47afca #5977b5 #ac3a39 #ff8931; border-style: solid; border-width: 200px 200px 200px 200px; height: 0px; width: 0px; display:block; margin:0px auto;/*центруем*/ }
В итоге на экране видим следующую картинку
Особенности метода
При использовании такого метода стоит отметить ряд факторов, которые будут влиять на дальнейшую работу веб-мастера над дизайном ресурса:
- метод позволяет рисовать только фигуры с острыми углами
- при явном не соблюдении равенства граней фигуры может возникнуть эффект искажения линий, которые и являются этими же гранями. Такой эффект ощутим в браузерах Opera и Internet Explower.
- комбинации треугольных фигур могут образовывать сложные многоугольники
- свойство box-shadow конфликтует с треугольными элементами, созданными по данной методике.
В каких браузерах работает?
| 6.0+ | 4.0+ | 10.0+ | 3.0+ | 3.0+ | - | - |
