• Главная
  • Услуги и цены
  • Портфолио
  • Блог
  • Контакты
ABVV
  • Главная
  • Услуги и цены
  • Портфолио
  • Блог
  • Контакты

Треугольник на чистом CSS

Для того, чтобы сделать треугольник на чистом CSS достаточно использовать всего один блок и пару строк стилей.

HTML

1
<div class="arrow-box"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.arrow-box {
  width: 100px;
  height: 50px;
  position: relative;
}
.arrow-box:before {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -12px;
  content: ' ';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 12px 0 12px 8px;
  border-color: transparent transparent transparent #007bff;
}

Результат