CSS clip-path — обрізання елемента за фігурою

CSS властивість clip-path обрізає елемент за заданою фігурою — видимою лишається тільки внутрішня частина.

правити

Загальний опис

На відміну від border-radius, який уміє лише скруглювати кути, clip-path вирізає що завгодно: коло, еліпс, багатокутник, довільний SVG-шлях.

Обрізане не просто ховається — воно перестає ловити кліки: миша проходить крізь вирізану частину.

Фігуру можна анімувати, якщо кількість точок збігається — так роблять ефектні переходи між формами.

правити

Порада

Круглий аватар простіше зробити через border-radius: 50%, а от косий зріз чи шестикутник — уже тільки clip-path: polygon(...).

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

clip-path: none | <basic-shape> | <url>;

Властивість clip-path може отримувати 4 значень:

none

Без обрізання.

автор: NagarD

правити

basic-shape

Фігура: circle(), ellipse(), inset(), polygon(), path().

автор: NagarD

правити

url

Посилання на SVG-елемент .

автор: NagarD

правити

geometry-box

Рамка обрізання: border-box, padding-box, content-box…

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
clip-path	55+	54+	9.1+	42+	79+	-

Підтримка: мобільні переглядачі

Переглядач
clip-path	55+	yes	yes	9.3+

Приклади

+ запропонувати свій приклад у пісочниці

<img class="avatar" src="/img/logo.svg" alt="">
<section class="slanted">Секція з косим зрізом</section>

.avatar {
    width: 120px;
    clip-path: circle(50%);
}

.slanted {
    padding: 3rem 1rem;
    background: #0172ad;
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}