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

25.04.2022

12008

Примеры как сделать различные вариации треугольников с помощью 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