Создание базовых и продвинутых фигур на чистом CSS

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

Ниже — практическое руководство: базовые фигуры, более сложные конструкции, советы, когда переходить на SVG/Canvas, тесты и чек‑листы для внедрения в проект.

Рисование базовых фигур

Начнём с простого: квадрат, прямоугольник, круг, эллипс и треугольник.

Квадрат и прямоугольник

Квадрат и прямоугольник — самые простые формы. Создайте div и задайте width и height.

HTML

CSS

.rec-sq {  
 display: flex;  
 gap: 2em;  
 margin: 2em;  
}  
.square {  
 width: 15rem;  
 height: 15rem;  
 background: rgb(255, 123, 0);  
}  
.rectangle {  
 width: 24rem;  
 height: 14rem;  
 background: rgb(0, 119, 128);  
}  

Вывод:

Круг и эллипс

Чтобы получить круг, установите border-radius: 50% у квадрата. То же для прямоугольника даст эллипс.

HTML

CSS

.circle {  
  width: 15rem;  
  height: 15rem;  
  background: rgb(255, 123, 0);  
  border-radius: 50%;  
}  
.ellipse {  
  width: 24rem;  
  height: 14rem;  
  background: rgb(0, 119, 128);  
  border-radius: 50%;  
}  

Вывод:

Треугольники

Треугольники в CSS делаются через бордеры: задайте width и height элемента равными нулю — «видимая» форма будет формироваться границами. По сути, ширина/высота треугольника задаётся размерами бордера.

HTML

CSS

/* общий блок для примера */
body {  
 display: flex;  
 gap: 5em;  
 margin: 15em;  
}
.sample {  
 height: 8.5em;  
 width: 8.5em;  
 border-top: 1em solid #9ee780;  
 border-right: 1em solid rgb(240, 241, 141);  
 border-bottom: 1em solid rgb(145, 236, 252);  
 border-left: 1em solid rgb(248, 115, 106);  
}
.triangle {  
  height: 0;  
  width: 0;  
  border-top: 5em solid #9ee780;  
  border-right: 5em solid rgb(240, 241, 141);  
  border-bottom: 5em solid rgb(145, 236, 252);  
  border-left: 5em solid rgb(248, 115, 106);  
}  

Вывод:

Чтобы направить треугольник вверх, оставьте только border-bottom с цветом, а остальные сделайте прозрачными. То же можно применять для правого направления или прямоугольного треугольника, управляя border-width и border-color.

HTML

CSS

.triangle-up {  
  height: 0;  
  width: 0;  
  border-top: 5em solid transparent;  
  border-right: 5em solid transparent;  
  border-bottom: 5em solid rgb(145, 236, 252);  
  border-left: 5em solid transparent;  
}  
.triangle-right {  
  width: 0;  
  height: 0;  
  border-style: solid;  
  border-width: 4em 0 4em 8em;  
  border-color: transparent transparent transparent rgb(245, 149, 221);  
}  
.triangle-bottom-right {  
  width: 0;  
  height: 0;  
  border-style: solid;  
  border-width: 8em 0 0 8em;  
  border-color: transparent transparent transparent rgb(151, 235, 158);  
}  

Вывод:

Создание продвинутых фигур

Сложные формы получают комбинацией базовых приёмов: псевдоэлементы ::before/::after, позиционирование и transform. Ниже — несколько классических примеров.

Звезда (5 лучей)

Идея: собрать несколько треугольников и повернуть их с помощью transform. Один блок — основа, ::before и ::after добавляют остальные лучи.

HTML

CSS

.star-five {  
  margin: 3.125em 0;  
  position: relative;  
  display: block;  
  width: 0em;  
  height: 0em;  
  border-right: 6.25em solid transparent;  
  border-bottom: 4.3em solid rgb(255, 174, 81);  
  border-left: 6.25em solid transparent;  
  transform: rotate(35deg);  
}  
.star-five:before {  
  border-bottom: 5em solid rgb(255, 174, 81);  
  border-left: 2em solid transparent;  
  border-right: 1.875em solid transparent;  
  position: absolute;  
  height: 0;  
  width: 0;  
  top: -45px;  
  left: -65px;  
  display: block;  
  content: '';  
  transform: rotate(-35deg);  
}  
.star-five:after {  
  position: absolute;  
  display: block;  
  top: 3px;  
  left: -105px;  
  width: 0;  
  height: 0;  
  border-right: 6.25em solid transparent;  
  border-bottom: 4.3em solid rgb(255, 174, 81);  
  border-left: 5.95em solid transparent;  
  transform: rotate(-70deg);  
  content: '';  
}  

Вывод:

Пятиугольник

Пятиугольник делается с помощью комбинации трапеции и треугольника, собранных через бордеры и позиционирование.

HTML

CSS

.pentagon {  
  position: relative;  
  width: 10em;  
  box-sizing: content-box;  
  border-width: 10em 5em 0;  
  border-style: solid;  
  border-color: rgb(7, 185, 255) transparent;  
  margin-top: 20rem;  
  margin-left: 10rem;  
}  
.pentagon:before {  
  content: "";  
  position: absolute;  
  height: 0;  
  width: 0;  
  top: -18em;  
  left: -5em;  
  border-width: 0 10em 8em;  
  border-style: solid;  
  border-color: transparent transparent rgb(7, 185, 255);  
}  

Вывод:

Ромб

Ромб — это два треугольника, собранные друг над другом с помощью позиционирования и border-color.

HTML

CSS

.diamond {  
  width: 0;  
  height: 0;  
  position: relative;  
  top: -3em;  
  border: 3em solid transparent;  
  border-bottom-color: rgb(129, 230, 255);  
}  
.diamond:after {  
  content: '';  
  width: 0;  
  height: 0;  
  position: absolute;  
  left: -3em;  
  top: 3em;  
  border: 3em solid transparent;  
  border-top-color: rgb(129, 230, 255);  
}  

Вывод:

Для «ромба‑щитa» можно изменить пропорции верхнего треугольника — пример ниже показывает вариацию.

HTML

CSS

.diamond-shield  
{  
  width: 0;  
  height: 0;  
  border: 3em solid transparent;  
  border-bottom: 1.25em solid rgb(71, 194, 231);  
  position: relative;  
  top: -3em;  
}  
.diamond-cut:after {  
  content: '';  
  position: absolute;  
  left: -3em;  
  top: 1.25em;  
  width: 0;  
  height: 0;  
  border: 3em solid transparent;  
  border-top: 4.4em solid rgb(71, 194, 231);  
}  

Вывод:

Сердце

Сердце формируется двумя закруглёнными полукругами (псевдоэлементы) и «основанием». Важны transform и transform-origin для точного совмещения.

HTML

CSS

.heart {  
  width: 6.25em;  
  height: 55em;  
  position: relative;  
}  
.heart:before,  
.heart:after {  
  content: "";  
  width: 3em;  
  height: 5em;  
  position: absolute;  
  left: 3em;  
  top: 0;  
  background: red;  
  border-radius: 3em 3em 0 0;  
  transform: rotate(-45deg);  
  transform-origin: 0 100%;  
}  
.heart:after {  
  left: 0;  
  transform: rotate(45deg);  
  transform-origin: 100% 100%;  
}  

Вывод:

Экспериментируйте и выбирайте подходящий инструмент

Теперь вы знакомы с приёмами создания множества фигур чисто на CSS. Но важно понимать, когда CSS — правильный выбор, а когда стоит взять SVG или Canvas.

Важно: если требуется сложная векторная графика с анимацией, кривыми или интерактивностью, SVG или Canvas будут проще поддерживать и масштабировать. CSS‑формы хороши для декоративных элементов, быстрых и лёгких иконок, надписей и фоновых украшений.

Примечание: при использовании CSS‑форм обратите внимание на доступность (ARIA/семантика), попадание в потоки документа и влияние на расположение соседних элементов.

Полезные советы и методы

• Начинайте с базовой геометрии: спроектируйте фигуру на бумаге как набор треугольников, прямоугольников и кругов.
• Используйте переменные CSS (–color, –size) чтобы легко переиспользовать и настраивать фигуры.
• Для адаптивности задавайте размеры в относительных единицах (rem, %, vw) вместо фиксированных пикселей.
• Тестируйте в разных браузерах и на ретина‑экранах; некоторые трансформации могут визуально смещаться.

Альтернативные подходы

• SVG: когда нужна точная векторная графика, сложные кривые, динамическая манипуляция через JS или экспорт из дизайнерских инструментов.
• Canvas: для генеративной графики и множества частиц/точек с высокой частотой обновления.
• Icon fonts / inline images: для простых наборов иконок, где формы не меняются программно.

Контрпримеры — когда CSS‑фигуры не подойдут

• Сложные иллюстрации с множественными кривыми и градиентами — неудобно и громоздко собирать на чистом CSS.
• Необходимость экспорта в векторные редакторы (SVG — естественный формат).
• Интерактивные или динамически изменяемые фигуры с множеством точек управления — лучше SVG.

Чек‑лист для внедрения в проект (роль‑зависимый)

Для дизайнера:

• Уточнить, должна ли фигура быть векторной и экспортируемой.
• Подготовить стиль (цвета, размеры в системе дизайна).

Для фронтендера:

• Решить, CSS или SVG лучше подходят по производительности и поддержке.
• Вынести цвет/размер в CSS‑переменные.
• Добавить aria‑label/роле для декоративных элементов (или aria-hidden для чисто декоративных).

Для QA / тестировщика:

• Проверить отображение на основных браузерах и разрешениях.
• Проверить влияние формы на поток документа и доступность клавиатуры.

Мини‑методология: как создавать новую форму

1. Схематично разбейте желаемую форму на простые фигуры (треугольники, квадраты, круги).
2. Реализуйте базовую геометрию в отдельных div.
3. Объедините части с помощью position и псевдоэлементов.
4. Подгоните transform, transform-origin и border‑ширины.
5. Вынесите цвета и размеры в переменные; протестируйте адаптивность.

Краткий справочник (cheat sheet)

• border-radius: 50% — круг/эллипс;
• width/height = 0 + border: X solid color — треугольник;
• ::before / ::after — дополнительные части фигуры;
• transform: rotate() — поворот фрагментов;
• transform-origin — точка вращения;
• box-sizing: content-box — контроль размеров при использовании border‑width как части геометрии.

Критерии приёмки

• Фигура отображается корректно в Chrome, Firefox, Safari и Edge.
• Размеры и цвета управляются через CSS‑переменные.
• Элемент не ломает макет и корректно адаптируется под разные ширины экрана.
• Для декоративных фигур установлено aria-hidden=”true”; если фигура несёт смысл — добавлен aria-label.

Итог

Чистый CSS даёт мощные возможности для декоративных и простых векторных форм без растровых картинок. Он экономит трафик и ускоряет загрузку, но для сложной векторной графики лучше использовать SVG/Canvas. Экспериментируйте: комбинируйте бордеры, псевдоэлементы и трансформации — и вы сможете нарисовать почти любую геометрическую форму.