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

Как сделать треугольник на css

Использование 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%);
}