HTML и CSS 0

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

Приветствую вас на моем блоге. Как настроение? Я вот недавно вспомнил, как делается треугольник с помощью css. Вот думаю, может и вам рассказать laugh Итак, это информация о том, как сделать в css3 треугольник.

Интересные возможности известных свойств

Все-таки для меня css остается интересной технологией потому, что в нем можно находить интересные решения даже с теми свойствами, которые, казалось бы, являются вполне обычными. Я сейчас говорю о свойстве border. Оно задает рамку элементу. Так вот, именно с его помощью мы сейчас и сотворим треугольник.

Треугольник с помощью рамки

Чтобы не морочиться с какими-то там классами и идентификаторами, я просто создам новый html-документ и создам в нем всего лишь один пустой блок.
<div></div>

Ну а самое интересное происходит в css. Посмотрите внимательно на этот код:

div {
width: 0;
height: 0;
border: 10px solid transparent; /* Прозрачность всем сторонам границы */
border-top: 10px solid green; /* Именно это добавляет треугольник */
}

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

border-left-color: red;
border-bottom-color: yellow;
border-right-color: blue;

Убеждаемся в истинности утверждения:
треугольники

Как поменять форму треугольника

Для этого достаточно изменить толщину границ, сделать ее неодинаковой у сторон. Например, если все стороны оставить по 50 пикселей толщиной, а видимую сделать 70, то треугольник преобразится до такого вида:70

А если наоборот уменьшить до 30 пикселей, то станет таким:30

В общем, экспериментируйте!

А попробуйте написать такие стили:

div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 30px solid red;
border-right: 30px solid red;/* Добавляем треугольник */
}

Опа, какой-то красный самолетик получился laughыыы

А если добавить еще и нижнюю границу, то получиться вот что:три границы

div {
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 50px solid red;
border-left: 50px solid red;/* Добавляем треугольник */
}

А две видимые границы, равные по ширине, создадут такой треугольник:две границы

Полный контроль над треугольниками с помощью трансформаций

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

Ну а как получить больше контроля над треугольником? Воспользуйтесь трансформацией, а именно свойствами transform: rotate и transform: skew, которые позволяют повернуть и искривить блок. Их можно записывать через пробел.

transform: rotate(12deg) skew(5deg);

трансформ
Поворот задается в градусах (deg).

Крутите и искривляйте как вам угодно, только не забудьте такому треугольнику задать абсолютное позиционирование. Ну и как вам такой метод создания треугольников в css?

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5