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

Приветствую всех, кто оказался на страницах моего блога. Сейчас будем учиться рисовать треугольники на CSS. Уровень сложности здесь простейший, поэтому разобраться во всех тонкостях сможет даже совсем новичок. Создадим блок div без указания ширины и высоты:

1

<div class="corner1"></div>

И пропишем ему такие классы:

1
2
3
4
5

.corner1{
 border: 50px solid transparent;
 border-top: 50px solid #333;
 display: inline-block;
}

И вот такой треугольник мы в итоге получаем. У первого я сделал прозрачные границы, а у второго — видимые, для наглядности, чтобы было более понятно как это работает.

Точно таким же образом делаем и другие треугольники, вправо и влево:

1
2
3
4
5
6
7
8
9
10
11

.corner3{
  border: 50px solid transparent;
  border-right: 50px solid #333;
  display: inline-block;
}
 
.corner4{
  border: 50px solid transparent;
  border-left: 50px solid #333;
  display: inline-block;
}

Где применяются такие треугольники? Наиболее часто их можно встретить при стилизации всплывающих подсказок, а так же тегов. Но что делать, если нужен нестандартный треугольник. К примеру вот такой:

Для самой подсказки стили будут такими:

1
2
3
4
5
6
7
8
9
10

.corner5{
  background: #333;
  padding: 3px 10px;
  display: inline-block;
  color: #fff;
  font-size: 20px;
  border-radius: 3px;
  bottom: 20px;
  position: relative;
}

А для уголка к ней будем использовать псевдокласс :before и css трансформацию.

1
2
3
4
5
6
7
8
9

.corner:before{
  content: "";
  border: 5px solid transparent;
  border-top: 22px solid #333;
  position: absolute;
  top: 20px;
  transform: rotate(30deg);
  left: 5px;
}

Конечно создание треугольников на CSS этим не ограничивается и существует еще масса вариантов их применения. Можно рисовать ленты с тенями и много других элементов веб дизайна.