Использование border
Самый популярный способ создать треугольник — это использование CSS-свойства border
. Этот метод основан на том, что у элемента с нулевой шириной и высотой, но с разными границами, видимой остаётся только одна из них.
Влево
.left {
width: 0;
height: 0;
border: solid 40px transparent;
border-right: solid 40px #d44848;
}
Вправо
.right {
width: 0;
height: 0;
border: solid 40px transparent;
border-left: solid 40px #d44848;
}
Вниз
.bottom {
width: 0;
height: 0;
border: solid 40px transparent;
border-top: solid 40px #d44848;
}
Вверх
.top {
width: 0;
height: 0;
border: solid 40px transparent;
border-bottom: solid 40px #d44848;
}
Использование clip-path
Другой способ создания треугольника — использование clip-path
, который позволяет обрезать элемент по заданной форме.
Влево
.left {
width: 60px;
height: 60px;
background: #d44848;
clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
Вправо
.right {
width: 60px;
height: 60px;
background: #d44848;
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
Вниз
.bottom {
width: 60px;
height: 60px;
background: #d44848;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
Вверх
.top {
width: 60px;
height: 60px;
background: #d44848;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}