Создаем треугольники на CSS

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

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

Смотрим...

CSS

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

Чем больше бордюр, тем больше треугольник. Вы можете указать для треугольника любой цвет, любой размер и любое направление. Давайте посмотрим несколько примеров.

Пример №1

Пример №2. Красный треугольник

Пример №3. Весы

Пример №4. Цветок

Пример №5. Лого del.icio.us

Пример №6. Сердце

Пример №7. Параллелограмм

 
 
 
 


19 комментариев на “Создаем треугольники на CSS

  1. Если бы эти треугольники можно было бы еще и с бордерами делать, то было бы ваще ништяк

    • Через хаки можно.

      Не забывайте, что у каждого элемента есть как минимум два псевдо-элемента.

      Если хотите увидеть реализацию, то могу сделать...

  2. класс... а если я хочу реализовать меню как у гугла типа наводишь мышкой на ссылку и взнизу border-bottom меняет цвет то здесь можно border-bottom сделать в виде параллелограмма или же исходя из треугольноков только трапецию?

    • Можете сделать одним элементом и трапецию и параллелограмм. В компактном методе есть примеры реализации.

  3. наверно не поняли меня, я заинтерисовался методом

    border-left:5px solid transparent; /* левый наклон стрелки */

    border-right:5px solid transparent; /* правый наклон стрелки */

    если это применить к

    border-bottom: solid 5px #000;

    то получается трапеция, а вот есть ли способ перевернуть правый треугольник, чтоб в итоге получился параллелограмм

  4. у меня нет глубоких познаний верстке так общие понятия, в моем случае чтобы было одинаковые растояния между названием ссылок в меню я использую обычнный padding без указания свойства width, то есть длина блока завсисит от длины имени ссылки, в случаее border_bottom он по-умолчанию имеет такую же длину что и ссылка, а в css-tricks.com, свойство width задается явно.

    • а вариант с псевдоэлементами вам подойдет?

      ddddsdsdnbsdsad

  5. и еще меня смущает как я буду менять цвет параллелограмма при наведении мышки на ссылку (без использования JS)

  6. День добрый.

    А как сделать так, чтобы при наведении на треугольник он менял цвет? Здесь возникает проблема именно из-за способа построения треугольника. Выделяется вся область(как в блоке), а не только треугольник.

Оставить комментарий