Фигуры на чистом CSS: базовые и продвинутые

Кратко

Краткое руководство по созданию геометрических и декоративных фигур только с помощью CSS — без изображений и SVG. Покажу базовые приёмы (квадрат, круг, треугольник) и продвинутые трюки с ::before/::after (звезда, пятиугольник, ромб, сердце), а также рекомендации, когда использовать альтернативы.

Важно: все примеры работают в современных браузерах. Для старых версий может потребоваться префиксы или альтернативы (SVG, изображения).

Основная идея и полезные понятия

Определение: CSS-форма — визуальный элемент, созданный средствами CSS (размеры, бордера, border-radius, позиционирование, трансформации, псевдоэлементы) без растровых/векторных файлов.

Ключевые приёмы (в одну строку):

Квадрат/прямоугольник — задайте width/height.
Круг/эллипс — border-radius: 50%.
Треугольник — width/height = 0 + бордеры разных цветов/ширин.
Сложные фигуры — комбинируйте элементы и ::before/::after; используйте transform и позиционирование.

Рисование базовых форм на CSS

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

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

и задайте 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);
}

Вывод:

Квадрат и прямоугольник, созданные с помощью CSS

Круг и эллипс

Чтобы получить круг, установите 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 равные 0, а «видимая» ширина получается из ширин бордеров. Три бордера делаете прозрачными, один — цветным.

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 в CSS

Чтобы получить треугольник, направленный вверх, задайте цвет только у 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);
}

Вывод:

Разные типы треугольников, созданных с помощью CSS

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

Используйте ::before и ::after для комбинирования фигур, позиционируйте и поворачивайте блоки через transform — так создаются сложные формы без SVG.

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

Идея: собрать звезду из трёх элементов — основной блока и двух псевдоэлементов, повернув их через transform.

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: '';
}

Вывод:

Создание пятиконечной звезды с помощью CSS

Пятиугольник (пентагон)

Комбинируем трапецию и треугольник через бордеры и псевдоэлемент.

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);
}

Вывод:

Рисование пятиугольника с помощью CSS

Ромб

Группируем два треугольника (вверх и вниз) с абсолютным позиционированием.

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);
}

Вывод:

Ромб, созданный с помощью CSS

Можно изменить высоту верхнего треугольника, чтобы получить «щит» ромба.

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);
}

Вывод:

Ромб-щит, созданный с помощью CSS

Сердце

Сердце создаётся из блока и двух псевдоэлементов, повернутых и скруглённых через border-radius.

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. Это помогает снизить вес страницы и лучше интегрировать графику в дизайн и анимацию. Ниже — практические подсказки и чек-листы.

Когда CSS-фигуры не подходят (контрпримеры)

Если форма очень детализирована или должна точно соответствовать векторному макету — используйте SVG.
Для динамически меняемых форм с большим количеством вершин удобнее генерировать SVG через JS.
Если требуется поддержка очень старых браузеров (IE <= 8), многие приёмы не будут работать.

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

SVG: точная геометрия, интерактивность, масштабируемость.
inline-SVG в HTML — удобен для стилизации через CSS и анимаций.
CSS clip-path (polygon()) — удобно для многоугольников и сложных масок.
CSS mask-image / WebGL для сложных визуальных эффектов.

Методология — как проектировать форму (мини-метод)

Определите точность: нужен макет или «примерный» вид? Если точность — SVG.
Разбейте форму на простые части: прямоугольники, треугольники, круги.
Решите, какие части будут псевдоэлементами, а какие — основными блоками.
Настройте размеры в относительных единицах (rem, %) для адаптивности.
Тестируйте в разных браузерах и на разных масштабах.

Чек-листы по ролям

Разработчик:

Проверить вёрстку на рефлоу/репейн.
Убедиться, что фигуры не ломают layout при изменении font-size.
Добавить префиксы при необходимости.

Дизайнер:

Уточнить допустимые отклонения формы.
Предоставить справочный SVG для сравнения.

Тестировщик:

Тестировать в мобильных и десктоп-браузерах.
Проверить контраст и восприятие цвета (если фигура несёт смысл).

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

Фигура визуально соответствует макету в пределах согласованной погрешности.
Размеры адаптируются при изменении масштабирования страницы.
Не возникает горизонтального/вертикального сдвига контента.

Тест-кейсы (простые)

Откройте страницу в Chrome/Firefox/Safari: форма видна и не искажена.
Измените root font-size: фигура масштабируется пропорционально (если используются rem).
Уменьшите ширину контейнера: фигура не ломает соседние элементы.

Ментальные модели (эвристики)

Бордер как вектор: когда width/height = 0, видимая площадь — это «сумма» бордеров, направленных по диагонали.
Псевдоэлементы — дополнительные «пазлы», которые можно свободно позиционировать и вращать.
border-radius — быстрый способ перехода от жёсткой геометрии к мягким формам.

Краткий глоссарий

Псевдоэлемент: ::before / ::after — вставляют дополнительный содержательный блок в разметке через CSS.
border-radius: свойство для скругления углов элемента.
clip-path: CSS-свойство для обрезки области отображения элемента.

Примечания по доступности и производительности

Визуальные формы не должны быть единственным способом передачи информации (добавляйте текст или ARIA, если форма несёт смысл).
CSS-формы обычно легче и рендерятся быстрее, чем растровые изображения, но сложные комбинации и трансформации могут влиять на производительность при большом количестве на странице.

Итог

Создание фигур на чистом CSS — мощный приём для экономии веса страницы и сохранения гибкости дизайна. Простые приёмы (width/height, border-radius, border) и комбинирование с ::before/::after и transform открывают большой набор визуальных решений. Экспериментируйте, но выбирайте SVG, когда нужна точность или сложная интерактивность.

Короткий чек: разбейте форму на простые части → используйте бордеры/скругления → комбинируйте псевдоэлементы → тестируйте в браузерах.

Поделиться: X/Twitter Facebook LinkedIn Telegram