Генератор на clip-path

Како да го користите генераторот на clip-path

1. Изберете Облик: Полигон, Круг, Елипса или Inset. Избледениот слој го прикажува целиот елемент, а светлиот прикажува што останува видливо по сечењето.
2. Повлечете ги точките во уредникот. Кај полигонот секоја точка е агол; кликнете каде било на површината за да додадете точка на најблискиот раб. Кај круг или елипса повлечете ги центарот и точките за радиус. Кај inset повлечете ги четирите точки на рабовите.
3. Фино подесете во полињата подолу: листата Точки (X и Y во проценти, со Отстрани и Додај точка) за полигони или полињата Радиус, Центар X, Центар Y, Горе, Десно, Долу, Лево и Заоблени агли (px) за другите облици.
4. Забрзајте со Готови облици: триаголник, трапез, паралелограм, ромб, петаголник, шестаголник, осмоаголник, закосен раб, ѕвезда, крст, стрелки, шеврон, облаче за говор, круг, елипса и inset.
5. Штиклирајте Поравнување на 5 % за уредни вредности и Додај -webkit-clip-path (стар Safari) ако сè уште поддржувате Safari 13.0 или постар.
6. По избор спуштете фотографија во Слика во позадина (по избор) за да го видите обликот на вашата слика. Датотеката никогаш не се качува.
7. Копирајте го CSS код со Копирај.

Тастатура: фокусирајте точка, придвижете ја со стрелките (1 %, или 10 % со Shift) и притиснете Delete за да отстраните точка од полигонот. Полигонот задржува најмалку три точки.

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Функциите за облици на clip-path

clip-path го сокрива сè надвор од обликот. Елементот си ја задржува големината во распоредот; се сечат само исцртувањето и површината што реагира на клик.

• polygon(x1 y1, x2 y2, …) ги поврзува точките по ред и го затвора обликот. polygon(50% 0%, 100% 100%, 0% 100%) е триаголник свртен нагоре. Координатите почнуваат од горниот лев агол на елементот.
• circle(r at cx cy): circle(50% at 50% 50%) е најголемиот круг центриран во елементот. Радиусот во проценти е релативен на дијагоналата поделена со √2, па е дел од ширината само кај квадратни елементи.
• ellipse(rx ry at cx cy): хоризонталниот радиус е дел од ширината, вертикалниот дел од висината.
• inset(top right bottom left round radius) сече правоаголник внатре во рабовите, со ист скратен запис од една до четири вредности како кај маргините и по избор заоблени агли.

Оваа алатка запишува проценти, па обликот се скалира со елементот без оглед на неговата големина.

Совети за добри облици

• Редоследот на точките на полигонот е важен: движењето околу работ во правец на стрелките на часовникот (или спротивно) избегнува вкрстени облици „во форма на пеперутка“.
• Два облика со ист број точки може да се анимираат: transition: clip-path 0.4s мазно преобразува шестаголник во друг шестаголник. Прелистувачот не може да интерполира меѓу полигони со различен број точки.
• clip-path ги сече и box-shadow и рамките. За да дадете сенка на исечен облик, ставете filter: drop-shadow() на родителскиот елемент.
• Исечените површини не примаат кликови ни лебдење со глушецот, што е корисно за неправилни копчиња.