Как сделать в CSS треугольник: самые удобные способы

Очень часто современные красивые веб-страницы содержат много привлекательных графических элементов. Среди них используется такая простейшая геометрическая фигура как треугольник, который применяют для дизайна множества элементов. К примеру, их использую в качестве указателя на некий объект на странице, чтобы посетитель сайта обратил свое внимание на него. Конечно, основная функция треугольника – декоративная, так как блоки, содержащие их, становятся более современными и привлекательными.

Не все знают, как создавать такие фигуры посредством каскадных таблиц стилей, и задаются вопросом о том, как сделать треугольник в CSS.

Применение в оформлении сайтов

В веб-дизайне треугольники встречаются повсюду. Ими оформляются подсказки, меню, всевозможные элементы пользовательского интерфейса. Иногда их применяют при создании индикатора процесса загрузки. И если раньше можно было обходиться без них, то сейчас это невозможно, и разработчики обязаны приспосабливаться к таким требованиям. Ведь сегодня созданный в CSS треугольник – это важнейшая часть в построении взаимной связи между частями интерфейса и объединении в единое целое.

Многие верстальщики недоумевают, когда им приходит макет, в дизайне которого сплошь и рядом треугольники. Ведь нет свойств, которые бы напрямую создавали эту геометрическую фигуру. На самом деле доступно несколько методов, позволяющих это сделать.

Способ создания при помощи рамки

Первый метод, позволяющий создать в CSS треугольник – border. Он заключается в использовании рамки. Несмотря на то что границы, которые создаются с помощью свойства border не имеют прямого отношения к треугольнику, именно оно применяется наиболее часто для этой цели.

При задании нулевых высоты и ширины объекта, а также установке толстой границы, можно увидеть квадрат, который состоит из четырех равных треугольников. Хитрость заключается в том, что нужно оставить только необходимую границу, а остальные сделать прозрачными. И вот, получается нарисованный в CSS треугольник нужного направления и цвета.

Создавать углы при помощи свойства «рамки» удобно, потому что нет необходимости в рисовании картинки, используя какой-либо графический редактор. Параметры треугольника всегда можно изменить в коде. А еще это экономит время разработчику. Комбинируя различную ширину рамки, достаточно легко получить фигуру. Для понимания того, как это функционирует, можно просто создать пустой элемент с нулевой шириной, высотой и очень толстой рамкой различного цвета с каждой из сторон. Так, делая три стороны из четырех прозрачными, получают треугольники разных видов:

• треугольник, смотрящий влево, стороны которого равны;
• треугольник, смотрящий влево и сплющенный;
• вытянутый треугольник, смотрящий влево;
• прямоугольный треугольник, у которого прямой угол слева;
• треугольник, смотрящий вниз;
• треугольник, смотрящий вверх;
• треугольник, смотрящий вправо и множество других разновидностей.

Использование псевдоэдементов

С помощью таких приемов можно создавать уголки у всплывающих указаний и подсказок. Для того чтобы прикрепить посредством CSS треугольник к блоку, чаще всего программисты используют такие псевдоэлементы как after и before. Если использовать их вместе, то можно нарисовать в CSS треугольник, имеющий обводку.

Комбинируя их, разработчики создают множество красивых стрелок, применяя свойство position: relative к родительскому элементу. Это делается для того, чтобы псевдоэлементы не съехали со своих мест.

Плюсами использования рамки CSS для создания треугольников являются:

• быстрое и легкое редактирование размера и цвета при помощи свойств;
• поддержка всеми браузерами.

Минусы:

• так как используются рамки, нет возможности применить градиенты, тени;
• иногда, когда пользователь смотрит страницы в браузере Firefox, значение прозрачности может не сработать, и это будет искажать картинку.

Использование готовой картинки

Следующий метод создания треугольников – это применение закодированной картинки. Треугольник заранее рисуется в графическом редакторе и конвертируется в специальный код при помощи специализированных сервисов.

Плюсом такого способа является то, что можно сделать очень красивый дизайн с тенями, градиентами и рамками и потом просто все это закодировать. А к минусам можно отнести то, что не каждый хорошо владеет графическими программами. К тому же, если изображение имеет очень большой размер, то строка кода получается просто огромной. Это неудобно для разработчика.

Отдельным пунктом стоит использование браузеров Internert Explorer старых версий. В них данный способ попросту не будет работать.

Метод перевернутого квадрата

Одним из способов является создание средствами CSS перевернутого квадрата. Здесь необходимы два блока. Но некоторые используют псевдоэлементы.

Сначала создается квадрат. Он будет содержимым поворачиваемого элемента. Затем его разворачивают на 45 градусов, чтобы он стал похожим на алмаз. Затем производится сдвиг вверх, и внешний блок скрывается при помощи свойства overflow: hidden. Это решение также не является кроссбраузерным, и иногда картинка будет отображаться не так, как хотелось бы.

Итоги

Итак, существует множество методов для создания треугольника. Только как не потеряться во всех этих свойствах CSS? Справочник в таком случае всегда выручит. В нем описаны все свойства каскадных таблиц стилей.

Для тех кто не желает вдаваться в программирование и просматривать CSS-справочник, существуют онлайн-редакторы, которые генерируют треугольники нужных размеров и цветов. В визуальном редакторе пользователь выбирает и настраивает все параметры фигуры. Сконвертированный в код CSS треугольник генератор помещает в отдельное окошко прямо на лету. Затем сгенерированный код просто вставляется в таблицу стилей и подгоняется под дизайн страницы.