CSS polygon() — довільна фігура для clip-path
Опис
Функція polygon() в CSS використовується для створення полігональних форм для елементів. Вона надає можливість створювати замкнуті многокутники з вказаними координатами вершин. Ці полігональні форми можуть бути використані для створення складних фігур, масок або вирізання частин зображень.
Для визначення полігональної форми використовується функція polygon(), яка може бути встановлена як значення властивостей clip-path або shape-outside. Вона використовує комбінацію координат вершин, які утворюють полігон. Кожна вершина визначається двома значеннями: горизонтальною (x) та вертикальною (y) позицією. З'єднання вершин створює замкнутий многокутник, який і визначає форму полігона.
Ось приклад використання функції polygon():
.element {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}
У цьому прикладі ми використовуємо функцію polygon() для визначення полігональної форми для елемента з класом .element. Ми вказуємо координати вершин полігона, встановлюючи значення x та y для кожної вершини. У даному випадку ми задаємо п'ять вершин, що утворюють замкнутий п'ятикутник.
Загальний опис
автор: NagarD
- Нотатка
-
Функція
автор: Bondpolygon()надає можливість створювати складні форми, які важко досягти за допомогою інших засобів CSS. Вона дозволяє створювати цікаві геометричні ефекти, а також вирізати області зображень, додавати елементам нові обрізання та форми, що приносять більше гнучкості в дизайні веб-сайту.
Синтаксис
polygon([fill-rule]? , [<length-percentage> | auto]{2,})Функція polygon може отримувати 2 значень:
-
<fill-rule> -
nonzero(за замовчуванням) - використовує правило ненульової кривої Безьє.evenodd- використовує правило парності.
-
<length-percentage> -
Вказується довжина або відсоток відносно відповідних сторін елемента. Наприклад,
автор: Bond50%або10px. Приймає також значенняauto- розмір вершини визначається автоматично.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 37 | 54 | 10.1 | 24 | 79 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 37 | 54 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Використовується функція polygon() для створення многокутників.
HTML
<div id="description">
<h2>Приклад 2: Різні форми многокутників</h2>
<p>Використовується функція polygon() для створення многокутників.</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: 200px;
height: 200px;
margin-right: 20px;
}
.left {
background-color: red;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.right {
background-color: green;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}У цьому прикладі ми використовуємо CSS-функцію polygon() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.
HTML
<div id="description">
<h2>Вирізаний шматок тексту</h2>
<p>У цьому прикладі ми використовуємо CSS-функцію polygon() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.</p>
</div>
<div id="result">
<div class="container">
<div class="excerpt"></div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
</div>
</div>CSS
#description {
font-style: italic;
text-align: left;
line-height: 1.5;
margin-bottom: 50px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: flex;
justify-content: center;
}
.text {
font-size: 14px;
line-height: 1.5;
margin-bottom: 15px;
}
.excerpt {
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
clip-path: polygon(0px 0px, 0px 189px, 100.48% 94.71%, 200px 120px, 80.67% 37.17%);
shape-outside: polygon(0px 0px, 0px 189px, 100.48% 94.71%, 200px 120px, 80.67% 37.17%);
background-color: green;
}П'ять фігур поспіль. Перша — трикутник; друга й третя — та сама п'ятикутна зірка з тим самим списком вершин, і різниця між ними лише в правилі заповнення: evenodd лишає середину порожньою, nonzero її заливає. Четверта плавно перетікає при наведенні, бо кількість вершин однакова. П'ята написана з комами замість пробілів: оголошення відкинуто, і квадрат лишився квадратом.
HTML
<div class="grid">
<figure>
<div class="shape tri"></div>
<figcaption>polygon(50% 0%, 100% 100%, 0% 100%)</figcaption>
</figure>
<figure>
<div class="shape eo"></div>
<figcaption>зірка з polygon(evenodd, …) — середина порожня</figcaption>
</figure>
<figure>
<div class="shape nz"></div>
<figcaption>ті самі вершини з nonzero — середина залита</figcaption>
</figure>
<figure>
<div class="shape morph"></div>
<figcaption>наведіть: 4 вершини → 4 вершини, перехід плавний</figcaption>
</figure>
<figure>
<div class="shape broken"></div>
<figcaption>polygon(0%, 100%, 50%) — коми замість пробілів, оголошення відкинуто</figcaption>
</figure>
</div>
<p class="note">Наведіть на трикутник у першій клітинці й спробуйте потрапити
курсором у його верхній лівий кут — підказка не з'явиться: поза фігурою
елемент натискань не ловить.</p>CSS
.grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
}
figure {
margin: 0;
width: 150px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.shape {
width: 140px;
height: 140px;
background: linear-gradient(135deg, #2f6fd0, #72b043);
}
.tri {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.eo {
clip-path: polygon(evenodd,
50% 0%, 21% 90%, 98% 35%, 2% 35%, 79% 90%);
}
.nz {
clip-path: polygon(nonzero,
50% 0%, 21% 90%, 98% 35%, 2% 35%, 79% 90%);
}
.morph {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: clip-path .45s ease;
}
.morph:hover {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.broken {
clip-path: polygon(0%, 100%, 50%);
outline: 2px dashed #d64545;
}
.note {
margin-top: 18px;
max-width: 520px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!