Как пользоваться
- Введите Имя класса для правила, например triangle, и выберите Фигура.
- Для polygon перетащите точку в поле Предпросмотр или введите её x и y в поля. Кнопки Добавить точку и Удалить последнюю точку меняют число точек.
- Для inset, circle или ellipse введите числа в поля. Предпросмотр перерисовывается сразу.
- Скопируйте правило из блока CSS в таблицу стилей и поставьте класс на элемент, который нужно обрезать.
Четыре фигуры
Модуль CSS Shapes описывает базовые фигуры, которые принимает clip-path. Многоугольник — это список точек, каждая задана парой координат, а точки соединяются в том порядке, в котором вы их перечислили. Inset срезает блок на четырёх расстояниях: сверху, справа, снизу и слева. Круг или эллипс задаются радиусом (или двумя радиусами) и центром, который пишется после слова at.
- polygon(50% 0%, 100% 100%, 0% 100%) имеет три точки, у каждой есть x и y в процентах.
- inset(10% 20% 10% 20%) срезает 10 % сверху и снизу и 20 % слева и справа.
- circle(60px at 50% 50%) имеет радиус 60 px и центр в середине блока.
Проценты и опорный блок
Процент в точке, отступе или центре — это доля блока, и спецификация пересчитывает его от фактического размера опорного блока. Модуль CSS Masking говорит, что если опорный блок не задан, используется граничный блок (border box). Части элемента за пределами фигуры не рисуются.
Что инструмент не пишет
- Правило заполнения (fill rule) для многоугольника, слово round в inset и формы url() и path() свойства clip-path.
- Процентный радиус круга или эллипса. Текст спецификации, на который опирается инструмент, не говорит, как он пересчитывается, поэтому радиусы задаются в px.
Пример: треугольник
Треугольник — это многоугольник с тремя точками: верхняя середина блока, нижний правый угол и нижний левый угол. В таблице даны точки, а инструмент пишет правило .triangle с clip-path: polygon(50% 0%, 100% 100%, 0% 100%).
| Точка | x | y |
|---|---|---|
| 1 | 50% | 0% |
| 2 | 100% | 100% |
| 3 | 0% | 100% |
Частые вопросы
Почему радиусы круга и эллипса задаются в пикселях?
Текст спецификации не говорит, как процентный радиус пересчитывается для circle() и ellipse(), поэтому инструмент предлагает только пиксели. Радиус в пикселях понимается однозначно, и предпросмотр рисует его в том размере, который блок имеет на вашем экране.
Почему фигура исчезает, когда я ввожу неверное значение?
Инструмент показывает причину красным и не рисует фигуру, чтобы не дать вам правило, которое неверно. Обычные причины: значение вне допустимого диапазона или отступы, которые не оставляют части блока.
Важен ли порядок точек?
Да. Точки записываются в том порядке, в котором вы их перечислили, и этот порядок задаёт контур. Перемещение одной точки меняет фигуру, но не меняет остальные точки.
Чем clip-path отличается от border-radius?
clip-path обрезает элемент по фигуре, поэтому часть за её пределами не рисуется, а border-radius только скругляет углы. Опорный блок clip-path — граничный блок, если не задан другой.
Сколько точек может быть у многоугольника?
От 3 до 20. Больше точек дают более точный контур, но правило становится длиннее, а предпросмотр работает с двадцатью маркерами.
Отправляется ли созданный CSS куда-нибудь?
Нет. Предпросмотр и правило создаются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте CSS до того, как покинете страницу.
Источники
- W3C: модуль CSS Shapes, уровень 1, базовые фигуры (на английском)
- W3C: модуль CSS Masking, уровень 1, свойство clip-path (на английском)
Цифры и текст в последний раз проверены четверг, 12 ноября 2026 г..