Clip-path generaator

Kuidas clip-path generaatorit kasutada

1. Vali Kujund: Hulknurk, Ring, Ellips või Nihe servadest. Tuhmim kiht näitab kogu elementi, erk kiht seda, mis jääb pärast lõikamist nähtavaks.
2. Lohista redaktoris punkte. Hulknurga puhul on iga punkt nurk; klõpsa suvalises kohas alal, et lisada punkt lähimale servale. Ringi või ellipsi puhul lohista keskpunkti ja raadiuse punkte. Servadest nihke puhul lohista nelja serva punkte.
3. Täpsusta allolevatel väljadel: hulknurga puhul loendis Punktid (X ja Y protsentides, nuppudega Eemalda ja Lisa punkt), teiste kujundite puhul väljadel Raadius, Keskpunkt X, Keskpunkt Y, Ülaserv, Parem serv, Alaserv, Vasak serv ja Ümardatud nurgad (px).
4. Alusta kiiremini Eelseadetest: kolmnurk, trapets, rööpkülik, romb, viisnurk, kuusnurk, kaheksanurk, faasitud serv, täht, rist, nooled, nooleviir, jutumull, ring, ellips ja nihe servadest.
5. Märgi Joonda 5% sammuga, et väärtused oleksid korralikud, ja Lisa -webkit-clip-path (vana Safari), kui toetad endiselt Safari 13.0 või vanemat versiooni.
6. Soovi korral lohista valikusse Taustapilt (valikuline) foto, et näha kujundit oma pildil. Faili ei laadita kunagi üles.
7. Kopeeri CSS-kood nupuga Kopeeri.

Klaviatuur: fookusta punkt, liiguta seda nooleklahvidega (1% või Shiftiga 10%) ja vajuta Delete, et hulknurga punkt eemaldada. Hulknurgal jääb alati alles vähemalt kolm punkti.

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Clip-path kujundifunktsioonid

clip-path peidab kõik, mis jääb kujundist välja. Element säilitab paigutuses oma suuruse; lõigatakse ainult joonistamine ja klõpsatav ala.

• polygon(x1 y1, x2 y2, …) ühendab punktid järjekorras ja sulgeb kujundi. polygon(50% 0%, 100% 100%, 0% 100%) on ülespoole suunatud kolmnurk. Koordinaadid algavad elemendi vasakust ülanurgast.
• circle(r at cx cy): circle(50% at 50% 50%) on suurim ring, mis on elemendi keskel. Protsentuaalne raadius on suhtes elemendi diagonaaliga, jagatuna √2-ga, seega võrdub see osaga laiusest ainult ruudukujulise elemendi puhul.
• ellipse(rx ry at cx cy): horisontaalne raadius on osa laiusest, vertikaalne osa kõrgusest.
• inset(top right bottom left round radius) lõikab ristküliku servadest sissepoole, kasutades sama ühe kuni nelja väärtuse lühikirjaviisi nagu veeriste puhul ja soovi korral ümardatud nurki.

See tööriist kirjutab protsente, seega skaleerub kujund koos elemendiga sõltumata selle suurusest.

Näpunäiteid heade kujundite jaoks

• Hulknurga punktide järjekord loeb: serva mööda ringi käimine päripäeva (või vastupäeva) väldib ristuvaid „liblikakujulisi“ kujundeid.
• Sama arvu punktidega kujundeid saab animeerida: transition: clip-path 0.4s muudab kuusnurga sujuvalt teiseks kuusnurgaks. Brauser ei saa interpoleerida erineva punktide arvuga hulknurkade vahel.
• clip-path lõikab ära ka box-shadow ja ääred. Lõigatud kujundile varju andmiseks pane vanemelemendile filter: drop-shadow().
• Lõigatud alad ei saa klõpse ega hiirega ülekäimist, mis on mugav ebakorrapäraste nuppude puhul.