clip-path с polygon() и circle()
Обрезайте элементы по пользовательским многоугольным или круговым формам с помощью свойства clip-path.
«clip-path с polygon() и circle()» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое clip-path?
clip-path обрезает видимую область элемента по заданной форме. Всё за пределами формы становится невидимым, но по-прежнему занимает место в макете.
clip-path: circle()
Обрежьте элемент по кругу. Аргументом является радиус:
<div class="avatar"></div>
<div class="badge"></div>
clip-path: ellipse()
Обрежьте элемент по эллипсу, задав радиусы по осям x и y и, при необходимости, положение центра:
<div class="card-image"></div>
clip-path: polygon()
Самая мощная функция clip-path. Задайте многоугольник, перечислив пары координат x,y:
<div class="hexagon"></div>
<div class="diagonal-cut"></div>
clip-path: inset()
Обрежьте элемент по прямоугольнику с необязательным скруглением углов. Аргументы задают расстояния от краёв:
<div class="card"></div>
clip-path для форм секций
Создавайте угловые переходы между секциями страницы:
<div class="section-diagonal">Diagonal Section</div>
Анимация clip-path
Для clip-path с одинаковым количеством точек можно задать переходы, создавая анимации появления и преобразования формы:
<div class="reveal visible"></div>
clip-path и border-radius
Для простых скруглённых форм лучше подходит border-radius — он работает с фоном и границей. Используйте clip-path, когда нужны непрямоугольные формы, которые невозможно создать с помощью border-radius.
clip-path: path()
path() принимает строку пути SVG для создания произвольных форм:
<div class="star"></div>
Учет производительности
clip-path создаёт новый контекст наложения и при анимации может вызывать отрисовку на каждом кадре. Анимация clip-path требует больше ресурсов, чем transform или opacity, поэтому применяйте её осторожно.
Опорный блок clip-path
Система координат для clip-path — это рамка границы элемента (или рамка внешних отступов для SVG). Проценты отсчитываются относительно размеров элемента.
Быстрая проверка
Какая функция clip-path создаёт неправильную непрямоугольную форму, заданную парами координат?
Итоги
clip-path обрезает элементы по геометрическим формам. circle() и ellipse() создают скруглённые области обрезки. polygon() задаёт любую форму с несколькими вершинами. inset() обрезает элемент по прямоугольнику с необязательным скруглением. Для эффектных анимаций появления используйте многоугольники с одинаковым количеством точек. Применяйте path() для произвольных форм на основе SVG.
Часто задаваемые вопросы
Урок «clip-path с polygon() и circle()» бесплатный?
Да — полный текст урока «clip-path с polygon() и circle()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «clip-path с polygon() и circle()»?
Обрезайте элементы по пользовательским многоугольным или круговым формам с помощью свойства clip-path. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «clip-path с polygon() и circle()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- clip-path с polygon() и circle()
- shape-outside для обтекания текста
- Анимация фигур clip-path
- Маски CSS и clip-path