path() в CSS — фігура мовою SVG-шляху для clip-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). Цей шлях визначає форму, яка буде використовуватись для обрізання контенту елемента. Як результат, елемент буде відображатись лише у межах цього визначеного контуру.
Загальний опис
автор: NagarD
- Порада
-
Використовуйте редактори шляхів або інструменти, що допомагають створювати та редагувати SVG-шляхи, для полегшення процесу створення складних форм для елементів.
автор: Bond - Порада
-
Зверніть увагу, що використання
автор: Bondclip-pathз властивістюpath()є частиною SVG-стандарту і має більш широкі можливості, ніж звичайні CSS-функції. Для докладнішої інформації про використання шляхів SVG у CSS варто ознайомитися з офіційною документацією або іншими ресурсами, присвяченими SVG та векторній графіці. - Нотатка
-
Використання функції
автор: Bondpath()в CSS дозволяє створювати вражаючі та деталізовані ефекти обрізання та вибірки, додавати цікаві форми до вашого дизайну та керувати виглядом елементів точно під ваші потреби.
Синтаксис
path(<path-definition>)Функція path може отримувати єдине значення:
-
<path-definition> -
Визначає форму елемента за допомогою SVG-шляху. Може містити команди переміщення
автор: Bond(M, m), лінії(L, l), криві Безьє(C, c)та інші команди, що визначають форму шляху.
| Значення без задання: | none |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 46 | 97 | 33 | 79 |
| Переглядач |  |
 |
 |
|---|---|---|---|
| 46 | 46 | 97 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє використання CSS-функції path() разом з анімаційними властивостями для створення ефекту зміни форми елемента.
HTML
<div id="description">
<h1>Анімація за допомогою функції path()</h1>
<p>Цей приклад демонструє використання CSS-функції path() разом з анімаційними властивостями для створення ефекту зміни форми елемента.</p>
</div>
<div id="result">
<div class="container">
<div class="shape"></div>
</div>
</div>CSS
#description {
background-color: #f0f0f0;
padding: 20px;
text-align: left;
}
#description h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 10px;
}
#description p {
font-family: Arial, sans-serif;
font-size: 16px;
margin-bottom: 0;
}
#result {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f0f0f0;
}
.shape {
width: 150px;
height: 150px;
background-color: #ff0000;
clip-path: path("M0 0 L75 150 L150 0 Z");
animation: shapeAnimation 2s linear infinite alternate;
}
@keyframes shapeAnimation {
0% {
clip-path: path("M0 0 L75 150 L150 0 Z");
}
50% {
clip-path: path("M0 0 L150 150 L0 150 Z");
}
100% {
clip-path: path("M0 0 L75 150 L150 0 Z");
}
}Використання функції path() для створення різних многокутників.
HTML
<div id="description">
<h2>Приклад 2: Елементи з різними границями</h2>
<p>Використання функції path() для створення різних многокутників.</p>
</div>
<div id="result">
<div class="image-container">
<div class="box left"></div>
<div class="box right"></div>
</div>
</div>CSS
#description {
background-color: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.image-container {
display: flex;
}
.box {
width: 300px;
height: 200px;
margin-right: 20px;
}
.left {
background-color: red;
clip-path: path('M 20 240 L 20 80 L 160 80 L 160 20 L 280 100 L 160 180 L 160 120 L 60 120 L 60 240 Z')
}
.right {
background-color: green;
clip-path: path('M 20 240 C 20 0 300 0 300 240 Z');
}Перший ряд — те, що вміє один рядок команд: трикутник, коло з дуги, крива й зірка у двох правилах заповнення. Другий ряд — доказ абсолютних координат: та сама фігура у вужчій і вдвічі ширшій коробці лишається однакового розміру й у тому самому кутку. Третій — рейка offset-path: п'ять кульок на одній кривій із різним offset-distance. Наприкінці — плавний перехід між двома шляхами з однаковими командами (наведіть) і невалідний запис без лапок.
HTML
<p class="head">Один рядок команд — довільна фігура:</p>
<div class="row">
<figure>
<div class="sh tri"></div>
<figcaption>M 100 10 L 190 190 L 10 190 Z</figcaption>
</figure>
<figure>
<div class="sh circ"></div>
<figcaption>дуга A — коло</figcaption>
</figure>
<figure>
<div class="sh wave"></div>
<figcaption>крива C — хвиля</figcaption>
</figure>
<figure>
<div class="sh star-eo"></div>
<figcaption>path(evenodd, …) — середина порожня</figcaption>
</figure>
<figure>
<div class="sh star-nz"></div>
<figcaption>path(nonzero, …) — середина залита</figcaption>
</figure>
</div>
<p class="head">Координати абсолютні: у вдвічі ширшій коробці фігура не змінилась
(пунктир показує саму коробку):</p>
<div class="row">
<figure>
<div class="hold"><div class="sh tri"></div></div>
<figcaption>ширина коробки 200px</figcaption>
</figure>
<figure class="w2">
<div class="hold"><div class="sh wide tri"></div></div>
<figcaption>ширина коробки 400px — та сама фігура в лівому куті</figcaption>
</figure>
</div>
<p class="head">Той самий рядок як рейка: offset-path + offset-distance</p>
<div class="track">
<span class="dot d0"></span><span class="dot d1"></span><span class="dot d2"></span>
<span class="dot d3"></span><span class="dot d4"></span><span class="dot d5"></span>
<span class="dot d6"></span><span class="dot d7"></span><span class="dot d8"></span>
</div>
<p class="head">Наведіть: однакова послідовність команд — перехід плавний,
різна кількість вершин — стрибком:</p>
<div class="row">
<figure>
<div class="sh morph"></div>
<figcaption>3 команди → 3 команди</figcaption>
</figure>
<figure>
<div class="sh jump"></div>
<figcaption>3 команди → 4: стрибок</figcaption>
</figure>
<figure>
<div class="sh bad"></div>
<figcaption>path(M 100 10 …) без лапок — оголошення відкинуто</figcaption>
</figure>
</div>CSS
.head {
margin: 22px 0 8px;
max-width: 580px;
color: #5a6472;
font-size: .9em;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-start;
}
figure {
margin: 0;
width: 200px;
}
figure.w2 {
width: 400px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.sh {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #2f6fd0, #3a9a4f);
}
.tri {
clip-path: path("M 100 10 L 190 190 L 10 190 Z");
}
.circ {
clip-path: path("M 100 10 A 90 90 0 1 1 99 10 Z");
}
.wave {
clip-path: path("M 0 100 C 50 10, 150 190, 200 100 L 200 200 L 0 200 Z");
}
.star-eo {
clip-path: path(evenodd,
"M 100 10 L 42 190 L 196 78 L 4 78 L 158 190 Z");
}
.star-nz {
clip-path: path(nonzero,
"M 100 10 L 42 190 L 196 78 L 4 78 L 158 190 Z");
}
.hold {
display: inline-block;
border: 2px dashed #b9c6d8;
}
.wide {
width: 400px;
}
.track {
position: relative;
width: 320px;
height: 200px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.dot {
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 10px;
background: #c0392b;
offset-path: path("M 20 160 C 90 20, 230 200, 300 60");
}
.d0 { offset-distance: 0%; }
.d1 { offset-distance: 12.5%; }
.d2 { offset-distance: 25%; }
.d3 { offset-distance: 37.5%; }
.d4 { offset-distance: 50%; }
.d5 { offset-distance: 62.5%; }
.d6 { offset-distance: 75%; }
.d7 { offset-distance: 87.5%; }
.d8 { offset-distance: 100%; }
.morph {
clip-path: path("M 100 10 L 190 190 L 10 190 Z");
transition: clip-path .6s ease;
}
.morph:hover {
clip-path: path("M 100 130 L 190 190 L 10 190 Z");
}
.jump {
clip-path: path("M 100 10 L 190 190 L 10 190 Z");
transition: clip-path .6s ease;
}
.jump:hover {
clip-path: path("M 100 10 L 190 190 L 10 190 L 60 100 Z");
}
.bad {
clip-path: path(M 100 10 L 190 190 L 10 190 Z);
outline: 2px dashed #d64545;
}Коментарі
Коментарів ще немає — будьте першим!