Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Рисуем треугольные фигуры средствами CSS

Раздел: 

В статье рассмотрена методика создания треугольных фигур без использования изображений на чистом CSS.

треугольники-через-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+ - -