Создание равностороннего шестиугольника с помощью CSS: пошаговое руководство

Умение создавать геометрические фигуры с помощью CSS открывает широкие возможности для веб-дизайна. Мы уже рассмотрели, как рисовать основные формы, такие как квадраты и треугольники. Теперь давайте изучим несколько методов создания равностороннего шестиугольника с использованием CSS. В этом нам помогут псевдо-элементы :before и :after.

Содержание

Метод 1: Использование Свойства Border
Метод 2: Использование Свойства Transform
Метод 3: Использование Переменных CSS и Функции Calc
Улучшения

Метод 1: Использование Свойства Border

Прежде всего, вспомним, как можно создать треугольники, управляя свойствами border для HTML-элемента. Применяя этот принцип, мы можем также создать шестиугольник

HTML:

<div class="hexagon"></div>

CSS:

.hexagon {
width: 90px;
height: 50px;
background: #3e92cc;
position: relative;
}

.hexagon::before {
content: '';
position: absolute;
top: -25px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 25px solid #3e92cc;
}

.hexagon::after {
content: '';
position: absolute;
bottom: -25px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-top: 25px solid #3e92cc;
}

Результат: этот код создаст равносторонний шестиугольник. Однако здесь есть один недостаток: необходимо вручную рассчитывать размеры и позиции псевдо-элементов.

Метод 2: Использование Свойства Transform

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

CSS:

.hexagon {
width: 90px;
height: 50px;
background: #3e92cc;
position: relative;
}

.hexagon:before,
.hexagon:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #3e92cc;
top: 0;
left: 0;
}

.hexagon:before {
transform: rotate(60deg);
}

.hexagon:after {
transform: rotate(-60deg);
}

Используя transform, мы избавляемся от необходимости рассчитывать толщину границ. Однако, чтобы фигура оставалась равносторонней, необходимо учитывать соотношение сторон базового прямоугольника.

Метод 3: Использование Переменных CSS и Функции Calc

Для равностороннего шестиугольника соотношение сторон должно соблюдаться. В частности, ширина базового прямоугольника должна быть равна произведению высоты на корень из трех. Поскольку функция calc не позволяет вычислять корень, используем готовое значение 1.732.

CSS:

:root {
--hex-side: 50px; /* длина стороны шестиугольника */
}

.hexagon {
width: calc(var(--hex-side) * 1.732);
height: var(--hex-side);
background: #3e92cc;
position: relative;
}

.hexagon:before,
.hexagon:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #3e92cc;
top: 0;
left: 0;
}

.hexagon:before {
transform: rotate(60deg);
}

.hexagon:after {
transform: rotate(-60deg);
}

Улучшения

Используя еще одну переменную --hex-rotate, можно задавать угол наклона шестиугольника относительно его центра.

CSS:

:root {
--hex-side: 50px;
--hex-rotate: 30deg; /* угол наклона шестиугольника */
}

.hexagon {
width: calc(var(--hex-side) * 1.732);
height: var(--hex-side);
background: #3e92cc;
position: relative;
transform: rotate(var(--hex-rotate));
}

.hexagon:before,
.hexagon:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #3e92cc;
top: 0;
left: 0;
}

.hexagon:before {
transform: rotate(60deg);
}

.hexagon:after {
transform: rotate(-60deg);
}

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