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

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

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

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

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

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

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

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

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

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

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

Табл. 1. Возможные виды треугольников

Вид	Стиль
border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

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

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

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

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

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

Использование трансформации

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

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

Источник

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

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

Сегодня мы приготовим целую компанию разных треугольников! Равносторонние, направленные в разные стороны, прямоугольные треугольники — все они будут в нашем арсенале. Итак, поехали!

Наша цель: создать треугольники, представленные на изображении ниже, средствами CSS:

Ингредиены: HTML, CSS

Изюминка процесса: основная роль в создании треугольников отводится CSS свойству border. Поэтому предлагаю вспомнить возможные значения этого свойства:

Ликбез по свойству border

В итоге граница элемента CSS определяется записью вида:

Например, border: 1px solid #ccc (сплошная граница серого цвета толщиной в 1px ).

Равнобедренные треугольники

Принцип создания.

Рассмотрим равнобедренный направленный вверх треугольник. Мысленно впишем треугольник в квадрат.

Сразу оговорюсь, что логика в создании CSS треугольников «притянута за уши». Но метод работает! Поэтому, дабы не запутаться в очередности «потягивания ушей», построю ассоциативную связь.Итак, на представленном выше рисунке видно, что основание треугольника совпадает с нижней границей квадрата. Значит, нижней границе зададим максимальную толщину. В моем случае, это 300px:

Затем взглянем на боковые части квадрата: фактически, их нет. Похоже, треугольник получили, «отрезав» по диагонали части боковые границы. Для «отрезанных» сторон мы задаем прозрачные границы:

Для верхней границы запишем border-top: 0;

И напоследок, так как квадрат воображаемый, зададим ему нулевые ширину и высоту: width:0; height:0.

Используя описанный выше принцип, потренируемся и создадим на CSS несколько видов треугольников!

Источник

6 методов создания треугольников

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

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

Закодированное изображение

Подготовленное изображение треугольника лучше всего конвертировать в строку, чтобы сократить количество запросов HTTP.

Полезные инструменты:

Плюсы

Минусы

Рамка CSS

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

Плюсы

Минусы

Объект HTML

Данное решение использует символы в кодах Unicode.

Плюсы

Минус

Полезный инструмент:

Кроме того, можно использовать шрифт с иконками в проектах, чтобы получить символ треугольника.

Повернутый квадрат CSS

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

Плюсы

Минусы

Элемент canvas HTML5

В разметке HTML помещаем элемент canvas :

И с помощью JavaScript рисуем треугольник:

SVG (Scalable Vector Graphics)

Вот как можно определить встроенный в разметку треугольник SVG:

И добавляем для него стили:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/how-to-create-triangle-shapes
Перевел: Сергей Фастунов
Урок создан: 12 Сентября 2012
Просмотров: 63105
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

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

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

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

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

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

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

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

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

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

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

Источник

Как создать указатель-треугольник на чистом CSS

2014-06-15 / Вр:22:39 / просмотров: 5599

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

А также в комментариях:

Создать треугольник с помощью border

Способ №1

Чтобы задать треугольник с помощью «border», нужно указать:

толщину границы 20px ( border-width : 20px );
цвет четырех сторон ( border-color : blue red green black );
стиль рамки ( border-style : solid );
ширину и высоту со значением «0» ( width : 0 ; height : 0 ; )

Теперь три стороны сделаем таким же цветом, как фон сайта, а одну оставим черным цветом.

Способ №2

Чтобы задать треугольник с помощью «border», нужно указать:

толщину границы 20px ( border-width : 20px );
цвет четырех сторон ( border-color : blue red green black );
стиль рамки ( border-style : solid );
ширину и высоту со значением «0» ( width : 0 ; height : 0 ; )

Теперь три стороны сделаем прозрачными с помощью «transparent», а одну оставим черным цветом.

Если вы задаетесь вопросом, почему я написал вам первый способ, если второй более правильный, то я отвечу, что это на тот случай, если какой-то браузер, типа Internet Explorer не поймет сделанный вами трюк с прозрачностью «transparent».

Таблица возможных видов треугольников:

Вид	Стиль
	border: 20px solid transparent; border-top: 20px solid black;
	border: 20px solid transparent; border-right: 20px solid black;
	border: 20px solid transparent; border-bottom: 20px solid black;
	border: 20px solid transparent; border-left: 20px solid black;
	border: 20px solid transparent; border-top: 20px solid black; border-right: 20px solid black;
	border: 20px solid transparent; border-right: 20px solid black; border-bottom: 20px solid black;
	border: 20px solid transparent; border-bottom: 20px solid black; border-left: 20px solid black;
	border: 20px solid transparent; border-left: 20px solid black; border-top: 20px solid black;

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

Источник