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

    Один комментарий 3003

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

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

Телеграм-канал serblog.ru

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

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 этим не ограничивается и существует еще масса вариантов их применения. Можно рисовать ленты с тенями и много других элементов веб дизайна.

Любая сумма на развитие сайта

1 комментарий
  1. Zajmy-Onlajn.blogspot.com:

    С помощью трансформации мы можем повернуть квадратный элемент на 45? и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *