Популярно, доступно, полезно

Треугольник CSS,квадрат и шестиугольник-создание фигур через css


Это довольно аккуратный трюк, который в один прекрасный день Вы может быть  найдете полезным, а может и нет. Однако, наверняка эта статья о создании фигур через css окажется для Вас образовательной, интересной, забавной и даже может заставит подумать. В этой статье, мы рассмотрим создание таких фигур как:

  • треугольник
  • квадрат
  • шестиугольник

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

Возьмем div 100px × 100px с границей 35px:

height: 100px;
width: 100px;
border: 35px solid #999;

Посмотрим, как он будет выглядеть, если каждой границе задать разный цвет:

height: 100px;
width: 100px;
border-top: 35px solid #B77;
border-bottom: 35px solid #7B7;
border-left: 35px solid #77B;
border-right: 35px solid #BB7;

Если не задавать высоту и указать контейнеру div 0, получаем:

width: 0;
border-top: 35px solid #B77;
border-bottom: 35px solid #7B7;
border-left: 35px solid #77B;
border-right: 35px solid #BB7;

Уберем границу наверху и зададим с помощью css прозрачный цвет границам справа и слева, после чего получим треугольник:

width: 0;
border-bottom: 35px solid #7B7;
border-left: 35px solid transparent;
border-right: 35px solid transparent;

Через css свойства изменим толщину нижней границы полученного треугольника с 35px на 40, а боковых на 62px:

width: 0;
border-bottom: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;

Если поменять местами css свойства нижней и верхней границ, то получаем треугольник ориентированный вниз:

width: 0;
border-top: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;

Сложные геометрические фигуры CSS из простых: шестиугольник из квадрата и треугольников

Если поместить div, у которого нет верхней границы(треугольник ориентированный наверх), после него div с отсутствующей нижней границы(треугольник ориентированный вниз), а между ними вставить div без границ (квадрат), то получим:

.hexagon-7 .top{
width: 0;
border-bottom: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
}
.hexagon-7 .middle{
width: 124px;
height: 70px;
background-color: #7B7;
}
.hexagon-7 .bottom{
width: 0;
border-top: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
}

Таким образом, мы получили шестиугольник с помощью двух треугольников и квадрата с использованием только CSS.
С помощью аналогичного подхода можно получить повернутый на 30° шестиугольник. Просто вращаем полученный ранее шестиугольник с помощью float: left и отбрасываем явно заданное значение ширины — 0.

.hexagon-8 .top{
float: left;
border-right: 40px solid #7B7;
border-top: 62px solid transparent;
border-bottom: 62px solid transparent;
}
.hexagon-8 .middle{
float: left;
width: 70px;
height: 124px;
background-color: #7B7;
}
.hexagon-8 .bottom{
float: left;
border-left: 40px solid #7B7;
border-top: 62px solid transparent;
border-bottom: 62px solid transparent;
}

Обе ориентации можно использовать, чтобы выложить шестиугольники черепицей. Для первой ориентации нижний отступ у каждого шестиугольника устанавливаем -36px и слева 3px, а для четных строк устанавливаем отступ слева 63px:

Шестиугольники из треугольников и квадратов черепицей css в альбомной ориентации
.hexagon-9 .hexagon {
float: left;
margin-left: 3px;
margin-bottom: -36px;
}
.hexagon-9 .hexagon .top{
width: 0;
border-bottom: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
}
.hexagon-9 .hexagon .middle{
width: 124px;
height: 70px;
background-color: #7B7;
}
.hexagon-9 .hexagon .bottom{
width: 0;
border-top: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
}
.hexagon-9 .row {
clear: left;
}
.hexagon-9 .row.even {
margin-left: 63px;
}

Для второй ориентации для каждого шестиугольника устанавливаем отступ справа -66px и снизу -60px, также отступ сверху 63px для четных столбцов
Вторая ориентация включает margin-top -26px и margin-bottom -50px на каждом шестиугольнике, а также margin-top: 53px на четных столбцах:

Шестиугольники из треугольников и квадратов черепицей css в книжной ориентации
.hexagon-10 .hexagon {
float: left;
margin-right: -36px;
margin-bottom: -60px;
}
.hexagon-10 .hexagon div.top{
float: left;
width: 0;
border-right: 40px solid #7B7;
border-top: 62px solid transparent;
border-bottom: 62px solid transparent;
}
.hexagon-10 .hexagon div.middle{
float: left;
width: 70px;
height: 124px;
background-color: #7B7;
}
.hexagon-10 .hexagon div.bottom{
float: left;
width:0;
border-left: 40px solid #7B7;
border-top: 62px solid transparent;
border-bottom: 62px solid transparent;
}
.hexagon-10 .hex-row{
clear:left;
}
.hexagon-10 .hexagon.even {
margin-top: 63px;
}

И в завершении, краткая демонстрация перспективного преобразования CSS 3D, примененного к черепице с шестиугольниками:

Шестиугольники из треугольников и квадратов черепицей css в 3D
-webkit-transform: perspective(550px) rotateX(55deg);;
-moz-transform: perspective(550px) rotateX(55deg);
-ms-transform: perspective(550px) rotateX(55deg);
-o-transform: perspective(550px) rotateX(55deg);
transform: perspective(550px) rotateX(55deg);

Дополнение

Уилл Харди Twitter предложил вариант с использованием :before и :after без лишних div’ов:

.hexagon:before{
content: " ";
width: 0;
height: 0;
border-bottom: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
position: absolute;
top: -40px;
}
.hexagon{
margin-top: 40px;
width: 124px;
height: 70px;
background-color: #7B7;
position: relative;
}
.hexagon:after{
content: " ";
width: 0;
position: absolute;
bottom: -40px;
border-top: 40px solid #7B7;
border-left: 62px solid transparent;
border-right: 62px solid transparent;
}

jawns указал на Hacker News, что в Unicode есть U+2B22:

<span style = "color: # 7B7; font-size: 135px;"> &#x2B22; </ span>

Перевод статьи «CSS Hexagon Tutorial by James Tauber»

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

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