css.in.ua
Підтримати

CSS function path()

Опис

CSS функція path() дозволяє створювати складні форми для елементів, визначаючи їхні контури за допомогою SVG-шляхів. Ця функція відкриває широкі можливості для визначення різних типів форм, таких як лінії, криві та замкнуті фігури. За допомогою визначення шляху у форматі SVG, ви можете керувати переміщенням по координатах, малювати різні геометричні елементи, а також керувати кутами та радіусами.

Зауважте, що використання функції path() відкриває можливості, які не можуть бути досягнуті за допомогою стандартних CSS властивостей. Вона дозволяє вам точно визначити форму елемента з усіма її деталями, створюючи складні обрізання та вибірки.

Давайте розглянемо приклад використання функції path():

.element {
  clip-path: path("M50 0 L100 100 L0 100 Z");
}

У цьому прикладі ми використовуємо SVG-шлях для визначення області обрізання для елемента з класом .element. Шлях "M50 0 L100 100 L0 100 Z" описує три точки (M50 0, L100 100, L0 100) та закриває фігуру (Z). Цей шлях визначає форму, яка буде використовуватись для обрізання контенту елемента. Як результат, елемент буде відображатись лише у межах цього визначеного контуру.

Порада:

Використовуйте редактори шляхів або інструменти, що допомагають створювати та редагувати SVG-шляхи, для полегшення процесу створення складних форм для елементів.
Порада:

Зверніть увагу, що використання clip-path з властивістю path() є частиною SVG-стандарту і має більш широкі можливості, ніж звичайні CSS-функції. Для докладнішої інформації про використання шляхів SVG у CSS варто ознайомитися з офіційною документацією або іншими ресурсами, присвяченими SVG та векторній графіці.
Нотатка:

Використання функції path() в CSS дозволяє створювати вражаючі та деталізовані ефекти обрізання та вибірки, додавати цікаві форми до вашого дизайну та керувати виглядом елементів точно під ваші потреби.

Синтаксис

path(<path-definition>)
<path-definition>

Визначає форму елемента за допомогою SVG-шляху. Може містити команди переміщення (M, m), лінії (L, l), криві Безьє (C, c) та інші команди, що визначають форму шляху.

Переглядачі

Переглядач

46

97

33

79
Переглядач

46

46

97

Мобільних переглядачів ще не додано.

Приклади


Цей приклад демонструє використання CSS-функції path() разом з анімаційними властивостями для створення ефекту зміни форми елемента.

Використання функції path() для створення різних многокутників.

Спільнота

Зв'язок