В этом посте мы рассмотрим простой метод рисования треугольника в CSS с помощью границ.
<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
Треугольник вверх
Треугольник — одна из самых простых фигур в геометрии. Его можно нарисовать с помощью всего трех прямых линий и пары углов.
- Установите ширину и высоту 0.
- Установите цвет границы прозрачным.
- Установите верхнюю границу на 0.
- Установите боковые границы на половину ширины.
- Установите нижнюю границу на полную высоту.
- Задайте цвет для нижней границы.
.triangle-up {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid red;
}
Треугольник вниз
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid blue;
}
Треугольник влево
.triangle-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid yellow;
}
Треугольник вправо
.triangle-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
