ПитерСайт » Блог » Треугольник на CSS

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

Отрисовка равнобедренных треугольников вершиной вниз, вверх, вправо, влево.

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

HTML код:

<div class="example">
	<div></div>
</div>

CSS код:

.example div {
	display: inline-block;
	border-left: 4rem transparent solid;
	border-right: 4rem transparent solid;
	border-top: 5.6rem #c00 solid;
}

Треугольник вершиной вверх

HTML код:

<div class="example">
	<div></div>
</div>

CSS код:

.example div {
	display: inline-block;
	border-left: 4rem transparent solid;
	border-right: 4rem transparent solid;
	border-bottom: 5.6rem #c00 solid;
}

Треугольник вершиной вправо

HTML код:

<div class="example">
	<div></div>
</div>

CSS код:

.example div {
	display: inline-block;
	border-left: 5.6rem #c00 solid;
	border-top: 4rem transparent solid;
	border-bottom: 4rem transparent solid;
}

Треугольник вершиной влево

HTML код:

<div class="example">
	<div></div>
</div>

CSS код:

.example div {
	display: inline-block;
	border-right: 5.6rem #c00 solid;
	border-top: 4rem transparent solid;
	border-bottom: 4rem transparent solid;
}

Поддержка в браузерах

• Windows: Google Chrome, Firefox 3.0+, Edge 12.0+, Internet Explorer 8.0+, Opera 7.50+, Safari 3.1+
• Linux: Firefox 3.0+, Opera 7.50+, NetSurf 3.0+, Hv3

Теги: CSS, Геометрические + фигуры + CSS

• Опубликовано: 18 Февраля, 2023
• Последнее редактирование: 6 Ноября, 2023