Свойство border-width нельзя устанавливать в процентах.
Генератор треугольника с border
border-radius : с закруглёнными углами
clip-path : обрезать HTML-элемент
Можно делать адаптивные треугольники любой формы с любой фоновой картинкой, но пока поддержка браузеров хромает.
Генератор треугольника с clip-path
shape-inside : текст в треугольнике
С shape-outside , внешний текст будет обтекать элемент. Лучше использовать свойство shape-inside , но оно не имеет поддержки в браузерах.
текст
linear-gradient в background : фон наполовину
Генератор треугольника с background
linear-gradient в mask : наложить маску на HTML-элемент
Обрезает всё, выходящее за рамки треугольника. Можно делать адаптивные треугольники с любым фоном и любой формы, если вместо linear-gradient использовать SVG, но пока поддержка браузеров хромает.
Генератор треугольника с mask
Символ треугольника
Точные размеры не узнать: зависят от шрифта и браузера.
▼
Резиновый треугольник SVG
Одна из самых простых фигур, которой достаточно поля 2 на 2.
Генератор треугольника с SVG
Как сделать круг в CSS
Как сделать полукруг в CSS
Kliwi Ru Просто потрясающе сколько труда вы в один пост вкладываете. NMitra Ох, да. Стараюсь сделать так, чтобы потом самой было в удовольствие пользоваться.
Как сделать треугольник в css
Треугольник в CSS: В файле HTML напишем следующий код:
Границы одинаковой ширины прилегают друг к другу под углом 45 градусов. Затем делаем высоту и ширину 0, прозрачные боковые границы, а за счёт пересечения границ и свойства solid в итоге получается нарисовать треугольник. Пример в CodePen: Треугольник в CSS
Треугольники через CSS
На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.
Рис. 1. Треугольники в веб-дизайне
Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить — через border и transform .
Использование border
Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.
Рис. 2. Добавление border к элементу
Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).
Рис. 3. Элемент с прозрачными границами
В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .
Пример 1. Блок с треугольником
Треугольник
Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.
За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.
Онлайн CSS-генератор треугольников
CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS.
Простой пример, нескольких треугольников
И очень крутой пример, как же это работает и почему рамками можно сделать треугольники:
Если по дизайну для текста нужна тень то обычно мы используем CSS-свойство text-shadow в таком…
Задача — добавить на сайт всплывающие подсказки, но без подключения дополнительных библиотек, потому как их…
Простой полезный скрипт для анимаций или какого-либо отдельного функционала Пример, как скрипт определяет направление скролинга…
Задача такая, для IE11 и Edge задать отдельные стили для SVG, потому что в этих…
