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

Примеры как сделать различные вариации треугольников с помощью CSS-свойства border.

/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
}
CSS
/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-top: 30px solid orange;
}
CSS
/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-right: 30px solid orange;
}
CSS
/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent; 
	border-left: 30px solid orange;
}
CSS
/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
}
CSS
/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
}
CSS
/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
}
CSS
/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
}
CSS
/* Направленный вверх */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-bottom: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -24px;
	left: -26px;
	border: 26px solid transparent;
	border-bottom: 26px solid #fff;
}
CSS
/* Направленный вниз */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-top: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -28px;
	left: -26px;
	border: 26px solid transparent;
	border-top: 26px solid #fff;
}
CSS
/* Направленный влево */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-right: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -24px;
	border: 26px solid transparent;
	border-right: 26px solid #fff;
}
CSS
/* Направленный вправо */
span {
	display: inline-block;
	border: 30px solid transparent;
	border-left: 30px solid orange;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -26px;
	left: -28px;
	border: 26px solid transparent;
	border-left: 26px solid #fff;
}
CSS
/* Левый верхний угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: 2px;
	border-top: 33px solid #fff;
	border-right: 33px solid transparent;
}
CSS
/* Верхний правый угол */
span {
	display: inline-block;
	border-top: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: -38px;
	left: -35px;
	border-top: 33px solid #fff;
	border-left: 33px solid transparent;
}
CSS
/* Нижний правый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-left: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: -35px;
	border-bottom: 33px solid #fff;
	border-left: 33px solid transparent;
}
CSS
/* Нижний левый угол */
span {
	display: inline-block;
	border-bottom: 40px solid orange;
	border-right: 40px solid transparent;
	position: relative;
}
span:after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 2px;
	border-bottom: 33px solid #fff;
	border-right: 33px solid transparent;
}
CSS
25.04.2022
1535
Предыдущая запись Select option с ссылками
Следующая запись Склонение числительных в JS

Комментарии

, чтобы добавить комментарий.

Другие публикации

Диалоговые окна JS
Встроенные функции JS для вывода диалоговых окон.
9547
0
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
48006
+29
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
9805
+5
Подменю в dropdown Bootstrap
Разработчики Bootstrap начиная с третьей версии удалили поддержку подменю из-за того, что им никто не пользуется и на мобильных эта функция не актуальна. Ниже представлены примеры как сделать...
20777
+3
Блокировка многократной отправки формы
Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы...
7927
+3
jQuery UI Slider
jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.
11470
+3