Делаем CSS треугольники

Когда вы просматриваете сайты, часто видите выпадающие меню, и у них будет маленький треугольник.

Когда видите этот треугольник, вы обычно думаете что это картинка. Можно ли сделать такие треугольники с помощью CSS? Ответ &madsh; да, и метод создания CSS-треугольников в основном использует CSS-свойство border.

Как сделать треугольник с помощью CSS

Во-первых, давайте взглянем на обычный код c CSS border. Сделаем контейнер с шириной и высотой по 100 пикселей, у которого все границы будут разного цвета, шириной по 10 пикселей.

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 10px solid red;
  border-right: 10px solid lime;
  border-bottom: 10px solid blue;
  border-left: 10px solid yellow;
}

Теперь увеличим ширину границ до 120 пикселей. В зависимости от значения свойства box-sizing это будет выглядеть так

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 120px solid red;
  border-right: 120px solid lime;
  border-bottom: 120px solid blue;
  border-left: 120px solid yellow;
  box-sizing: content-box;
}

Или так

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 120px solid red;
  border-right: 120px solid lime;
  border-bottom: 120px solid blue;
  border-left: 120px solid yellow;
  box-sizing: border-box;
}

И это будет то, что надо. Оставляем box-sizing: border-box. Теперь из получившихся четырёх треугольников оставляем один, например красный (border-top).

Для этого цвет остальных делаем прозрачным, используем для этого значение rgba(0,0,0,0).

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 120px solid red;
  border-right: 120px solid rgba(0,0,0,0);
  border-bottom: 120px solid rgba(0,0,0,0);
  border-left: 120px solid rgba(0,0,0,0);
  box-sizing: border-box;
}

Теперь можно настроить размеры треугольника, изменим ширину верхней, правой и левой границ, а нижнюю совсем уберём.

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 175px solid red;
  border-right: 75px solid rgba(0,0,0,0);
  border-bottom: none;
  border-left: 75px solid rgba(0,0,0,0);
  box-sizing: border-box;
}

Или использовать границу слева, чтобы повернуть треугольник:

.box_1 {
  width: 100px; 
  height: 100px; 
  margin: 20px auto;
  border-top: 75px solid rgba(0,0,0,0);
  border-right: none;
  border-bottom: 75px solid rgba(0,0,0,0);
  border-left: 175px solid yellow;
  box-sizing: border-box;
}

Тут вот еще такое есть »