Как создавать треугольники в CSS

В этом посте мы рассмотрим простой метод рисования треугольника в CSS с помощью границ.

<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
Вход в полноэкранный режим Выход из полноэкранного режима

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

Треугольник — одна из самых простых фигур в геометрии. Его можно нарисовать с помощью всего трех прямых линий и пары углов.

  1. Установите ширину и высоту 0.
  2. Установите цвет границы прозрачным.
  3. Установите верхнюю границу на 0.
  4. Установите боковые границы на половину ширины.
  5. Установите нижнюю границу на полную высоту.
  6. Задайте цвет для нижней границы.
.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;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий