Как сделать треугольник css
Перейти к содержимому

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

  • автор:

Онлайн CSS-генератор треугольников

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

Простой пример, нескольких треугольников

И очень крутой пример, как же это работает и почему рамками можно сделать треугольники:

Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком…

Задача — добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их…

Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга…

Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример 2. Загнутый уголок

См. также

  • border
  • box-shadow
  • Анимация кнопок при наведении
  • Блочные элементы
  • Добавление тени
  • Колесо для сокращённых свойств
  • Открываем блочную модель
  • Оформление кнопок
  • Оформление ссылок
  • Повёрнутые рамки
  • Работа с типографикой
  • Рамка вокруг изображений
  • Свойство border
  • Строчные элементы
  • Тени у

Треугольники через CSS

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

Треугольники в веб-дизайне

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

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .

Использование border

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

    Треугольник    

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

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

Треугольник в CSS:
В файле HTML напишем следующий код:

 id="triangle">

В файле CSS напишем следующий код:

#triangle  width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; > 

Границы одинаковой ширины прилегают друг к другу под углом 45 градусов.
Затем делаем высоту и ширину 0, прозрачные боковые границы, а за счёт пересечения границ и свойства solid в итоге получается нарисовать треугольник.
Пример в CodePen:
Треугольник в CSS

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

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