Как сделать треугольник в css

Делаем CSS треугольники

Когда вы просматриваете сайты, часто видите выпадающие меню, и у них будет маленький треугольник.

Когда видите этот треугольник, вы обычно думаете что это картинка. Можно ли сделать такие треугольники с помощью CSS? Ответ &madsh; да, и метод создания CSS-треугольников в основном использует CSS-свойство border .

Как сделать треугольник с помощью CSS

Во-первых, давайте взглянем на обычный код c CSS border . Сделаем контейнер с шириной и высотой по 100 пикселей, у которого все границы будут разного цвета, шириной по 10 пикселей.

Теперь увеличим ширину границ до 120 пикселей. В зависимости от значения свойства box-sizing это будет выглядеть так

И это будет то, что надо. Оставляем box-sizing: border-box . Теперь из получившихся четырёх треугольников оставляем один, например красный ( border-top ).

Для этого цвет остальных делаем прозрачным, используем для этого значение rgba(0,0,0,0) .

Теперь можно настроить размеры треугольника, изменим ширину верхней, правой и левой границ, а нижнюю совсем уберём.

Добавление треугольника

Треугольники в веб-дизайне часто используются как указатели, стрелки или просто в качестве оформления элементов веб-страниц. Для создания треугольников обычно применяются границы — сперва делается блок нулевого размера, затем к этому блоку добавляется border , размер которого совпадает с размером треугольника. Окончательно делаем границы на неиспользуемых сторонах прозрачными, в итоге остаётся цветной треугольник.

Чтобы на первых было проще делать разные треугольники, можно воспользоваться генераторами. Вот один из них.

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

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

Позиционирование треугольника делается традиционно — через свойство position и свойства left и top . Такой подход позволяет разместить треугольник в любом произвольном месте нашего блока.

Пример 1. Треугольник возле заголовка

Результат данного примера показан на рис. 1.

Треугольник возле заголовка

Рис. 1. Треугольник возле заголовка

Другой разновидностью треугольника может служить уголок, который имитирует загнутый лист (рис. 2).

Загнутый уголок

Рис. 2. Загнутый уголок

Опять же, сперва делаем прямоугольный треугольник с помощью border , затем помещаем его в правый верхний угол блока. Чтобы при этом получить эффект загнутого уголка, часть квадрата закрасим белым цветом, совпадающим с цветом фона. Да, выходит, что на разноцветном фоне этот метод работать не будет.

Для большей выразительности уголка добавим к нему тень через box-shadow, а чтобы тень оставалась только на уголке, обрежем её за пределами блока через свойство overflow со значением hidden (пример 2).

Делаем треугольник на CSS с помощью border

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: что уж там какие то треугольники?

Мы попробуем выжать, казалось бы, немыслемое из свойства border. Итак, треугольники бордюрами.

Вообще, зачем нам треугольник?

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

Всегда можно решить задачу, нарезав еще несколько картинок, добавив нужное наложение слоев с абсолютным позиционированием и т.п. Но разве можем вы называть себя верстальщиками с большой буквы «В», если не обошлись минимумом картинок из макета? 🙂

Откуда берется треугольник?

Все контейнеры в HTML изначально — прямоугольники, так где же взять этот пресловутый треугольник? Давайте рассмотрим следующий пример контейнера с очень толстой границей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *