Геометрические фигуры с помощью CSS

Простую фигуру на CSS рисует один блок div: размеры, цвет и border-radius. Для треугольников и многоугольников нужны трюки с границами, псевдоэлементами или свойство clip-path. Ниже – код 21 фигуры и советы, когда какой приём брать. Листинги можно копировать в свою страницу; там, где фигуре нужно место вокруг, это оговорено.

Во всех примерах фигура – это div с идентификатором из названия фигуры; только в разделе про clip-path вместо идентификаторов стоят классы. Для нужных вам размеров меняйте числа в CSS, остальное оставляйте как есть.

Обновлено: 2026-09-26 22:18:35 Вадим Дворниковавтор материала

Простые фигуры: круг, квадрат, прямоугольник, овал...

Окружность

Окружность – это квадрат с полностью скруглёнными углами. Задайте равные width и height, а радиус поставьте в 50%. Тогда фигура остаётся кругом при любом размере.

<div id="circle"></div>

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    border-radius: 50%;
}

Если размер задаёт родитель, замените высоту на aspect-ratio: 1. Блок сам поддержит квадратные пропорции.

Квадрат

Квадрату нужны равные ширина и высота и цвет фона.

<div id="square"></div>

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

Прямоугольник

Здесь ширина больше высоты.

<div id="rectangle"></div>

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Овал

Овал – прямоугольник, у которого радиус скругления равен половине сторон. Запись 100px / 50px задаёт горизонтальный и вертикальный радиусы отдельно.

<div id="oval"></div>

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    border-radius: 100px / 50px;
}

Яйцо

Яйцо – тот же овал, но вытянутый по высоте, с разными радиусами сверху и снизу. Верхние углы скругляются на 60% высоты, нижние – на 40%. Проценты подстраиваются под размер блока, поэтому пиксельный вариант радиуса не нужен.

<div id="egg"></div>

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Параллелограмм

Функция skew() наклоняет блок по горизонтали. При положительном угле нижний край уходит вправо, а верхний влево. Это наклон, а не поворот.

<div id="parallelogram"></div>

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    transform: skew(30deg);
}

Текст внутри наклоняется вместе с блоком. Чтобы выровнять его, вложите в фигуру элемент и наклоните его в обратную сторону: transform: skew(-30deg).

Треугольники и трапеция на границах

Как границы превращаются в треугольник

Если у блока нет ширины и высоты, от него остаются одни границы. В углах они сходятся по диагонали, и каждая граница получается трапецией. Когда у блока width: 0 и height: 0, трапеции сжимаются в треугольники.

Закрасьте одну границу, а соседние сделайте transparent – останется один треугольник. Толщина границ задаёт размер: основание равно сумме боковых границ, высота – толщине закрашенной. На этом держатся все фигуры этого раздела.

Треугольник

Закрашена нижняя граница, боковые прозрачны, поэтому вершина смотрит вверх.

<div id="triangle"></div>

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

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

Чтобы перевернуть фигуру, закрасьте верхнюю границу.

<div id="triangle_down"></div>

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

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

Вершина смотрит влево, когда закрашена правая граница, а верхняя и нижняя прозрачны.

<div id="triangle_left"></div>

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

Треугольник вправо

Для обратного направления закрасьте левую границу.

<div id="triangle_right"></div>

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

Трапеция

У трапеции ширина не нулевая. Она задаёт длину короткого основания, а закрашенная нижняя граница с прозрачными боковыми – длинное.

<div id="trapezium"></div>

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

Многоугольники и звёзды

Ромб

Ромб – квадрат, повёрнутый на 45°. Повёрнутый блок занимает больше места, чем исходный квадрат, поэтому нужен внешний отступ margin, иначе фигура залезет на соседей. Для стороны 120px хватает 30px.

<div id="diamond"></div>

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
    transform: rotate(45deg);
    margin: 30px;
}

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

Пятиугольник собирают из двух частей: трапеции из границ самого блока и треугольника сверху из псевдоэлемента :before. Псевдоэлемент стоит на абсолютной позиции и цепляется к блоку через position: relative.

<div id="pentagon"></div>

#pentagon {
    width: 54px;
    position: relative;
    margin-top: 90px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}

#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

Треугольник выходит за верхний край блока на 35px. Отступ margin-top: 90px оставляет для него место с запасом, чтобы фигура не наехала на соседей.

Шестиугольник

Шестиугольник – прямоугольник с двумя треугольниками: один растёт вверх из :before, другой вниз из :after. Ширина треугольников равна ширине прямоугольника. Каждый выходит за блок на 25px, поэтому вертикальный отступ margin: 30px auto оставляет им место, а auto по бокам центрирует фигуру.

<div id="hexagon"></div>

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 30px auto;
}

#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

Восьмиугольник

Квадрат с двумя трапециями сверху и снизу даёт восьмиугольник. Трапеции получаются из границ: одна граница закрашена цветом фигуры, боковые – цветом фона страницы, чтобы «срезать» углы.

<div id="octagon"></div>

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}

#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

Срезы закрашены цветом #f4f4f4. Это цвет фона страницы в примере. На другом фоне замените его на свой, иначе в углах будут заметны серые квадраты. Прозрачность для срезов не подходит: сквозь них виден квадрат. Если фон переменный или фигура лежит на картинке, берите clip-path из следующего раздела.

Звезда

Пятиконечная звезда собирается из трёх треугольников. Основной – сам блок, повёрнутый на 35°. Два других – псевдоэлементы, которые поворачиваются в другую сторону и накладываются на него. Псевдоэлементы вынесены за границы блока (left: -65px и left: -105px), поэтому звезда занимает больше места, чем сам div. Оставьте вокруг неё свободное поле или оберните в контейнер с внутренними отступами, иначе она наедет на соседний текст.

<div id="star"></div>

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(35deg);
}

#star:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-35deg);
}

#star:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

Числа подобраны под конкретный размер. Хотите звезду другой величины – проще взять clip-path.

Шестиконечная звезда

Шестиконечная звезда – два одинаковых треугольника, направленных в противоположные стороны. Первый строит сам блок, второй – псевдоэлемент :after, сдвинутый вниз. Блок стоит в потоке через position: relative, а нижний отступ 40px оставляет место под второй треугольник: он выходит за границы блока.

<div id="star_six_points"></div>

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: relative;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto 40px;
}

#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

Многоугольники через clip-path

Свойство clip-path обрезает блок по контуру. Задайте polygon() с координатами вершин в процентах, и всё вне контура исчезнет. Заливка – обычный background, поэтому фон страницы не играет роли, а размер задаётся одними width и height. Функции circle() и ellipse() вырезают круг и эллипс.

Поддержку сверяйте до публикации. MDN относит clip-path к широко доступным возможностям, но таблица совместимости Can I use у Safari и iOS Safari показывает частичную поддержку. Если вам нужны старые версии этих браузеров, проверьте их на caniuse.com и в таблице совместимости на MDN, а на реальном устройстве откройте страницу с фигурой. Для старых Safari бывает нужен префикс -webkit-clip-path: добавьте его строкой перед обычной записью.

Каждая вершина – пара «x y» от левого верхнего угла блока. Треугольник вершиной вверх выглядит так:

<div class="clip-triangle"></div>

.clip-triangle {
    width: 140px;
    height: 140px;
    background: #fcf921;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Шестиугольник – шесть вершин. Высота блока около 87% ширины, тогда стороны получаются равными.

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

.clip-hexagon {
    width: 120px;
    height: 104px;
    background: #fc5e5e;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

Пятиконечная звезда – десять вершин: внешние и внутренние поочерёдно.

<div class="clip-star"></div>

.clip-star {
    width: 140px;
    height: 140px;
    background: #fc2e5a;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                       50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

Так же строятся пятиугольник и восьмиугольник: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%) и polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%).

Сложные фигуры: сердце, бесконечность, бабл, Pacman

Сердце

Сердце – две «половинки» с закруглённым верхом, повёрнутые в разные стороны. Каждая – псевдоэлемент. Повороты идут вокруг нижнего угла, за это отвечает transform-origin. Блоку нужны размеры: половинки стоят на абсолютной позиции и не задают их сами.

<div id="heart"></div>

#heart {
    position: relative;
    width: 140px;
    height: 115px;
}

#heart:before,
#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

Бесконечность

Знак бесконечности – две петли из квадратов с толстой границей. У каждого квадрата скруглены три угла, а сам он повёрнут на 45°: левый в одну сторону, правый в другую.

<div id="infinity"></div>

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

#infinity:before,
#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
}

Бабл для комментария

Бабл – прямоугольник со скруглёнными углами, к левой стороне которого псевдоэлемент :before приклеивает маленький треугольник. Свойство right: 100% ставит треугольник вплотную к левому краю.

<div id="comment_bubble"></div>

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

Pacman

Pacman – окружность с открытой правой стороной. Прозрачная правая граница вырезает «рот», а остальные три границы, скруглённые радиусом 70px, дают круглое тело.

<div id="pacman"></div>

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-radius: 70px;
}

Border, clip-path или SVG: что выбрать

Приёмы отличаются тем, как ведут себя фигуры на живой странице.

Заключение

Простые фигуры делайте через border-radius и transform. Маленькие треугольники, например стрелки у подсказок, удобно рисовать границами. Многоугольники и звёзды берите через clip-path: они масштабируются по проценту и не зависят от фона. Перед выкладкой сверьте поддержку в нужных вам браузерах. Если нужна кривая сложнее эллипса или иконка, которую вы будете использовать в разных местах, рисуйте её в SVG.