CSS clip-path generátor

A clip-path generátor használata

1. Válassz Alakzatot: Sokszög, Kör, Ellipszis vagy Téglalap (inset). A halvány réteg az egész elemet mutatja, a világos pedig azt, ami a kivágás után látható marad.
2. Húzd a pontokat a szerkesztőben. Sokszögnél minden pont egy csúcs; kattints bárhová a területen, hogy új pontot adj a legközelebbi élhez. Körnél és ellipszisnél húzd a középpontot és a sugárpontokat. Téglalapnál (inset) húzd a négy élpontot.
3. Finomhangolj az alatta lévő mezőkben: sokszögnél a Pontok listában (X és Y százalékban, Eltávolítás és Pont hozzáadása gombbal), a többi alakzatnál pedig a Sugár, Középpont X, Középpont Y, Felül, Jobbra, Alul, Balra és Lekerekített sarkok (px) mezőkben.
4. Gyorsabban indulhatsz az Előbeállításokkal: háromszög, trapéz, paralelogramma, rombusz, ötszög, hatszög, nyolcszög, letört sarkú alakzat, csillag, kereszt, nyilak, szögletes nyíl, szövegbuborék, kör, ellipszis és téglalap.
5. Jelöld be az Illesztés 5%-ra opciót a rendezett értékekért, és a -webkit-clip-path hozzáadása (régi Safari) opciót, ha még támogatod a Safari 13.0-s vagy régebbi változatát.
6. Ha szeretnéd, húzz egy fotót a Háttérkép (opcionális) mezőbe, hogy a saját képeden lásd az alakzatot. A fájl soha nem kerül feltöltésre.
7. A CSS-kódot a Másolás gombbal másolhatod ki.

Billentyűzet: fókuszálj egy pontra, mozgasd a nyílbillentyűkkel (1%, Shifttel 10%), és a Delete billentyűvel törölhetsz egy sokszögpontot. A sokszög legalább három pontot megtart.

A clip-path alakzatfüggvényei

A clip-path elrejt mindent, ami az alakzaton kívül van. Az elem megtartja a méretét az elrendezésben; csak a megjelenítés és a kattintható terület lesz kivágva.

• A polygon(x1 y1, x2 y2, …) sorban összeköti a pontokat, és lezárja az alakzatot. A polygon(50% 0%, 100% 100%, 0% 100%) felfelé mutató háromszög. A koordináták az elem bal felső sarkától indulnak.
• A circle(r at cx cy): a circle(50% at 50% 50%) az elem közepére illesztett legnagyobb kör. A százalékos sugár az elem átlójának √2-vel osztott értékéhez viszonyul, ezért csak négyzet alakú elemnél egyezik meg a szélesség egy részével.
• Az ellipse(rx ry at cx cy): a vízszintes sugár a szélesség, a függőleges a magasság egy része.
• Az inset(top right bottom left round radius) egy téglalapot vág ki a szélektől befelé, ugyanazzal az egy-négy értékes rövidítéssel, mint a margók, és opcionális lekerekített sarkokkal.

Ez az eszköz százalékokat ír ki, így az alakzat az elem méretétől függetlenül vele együtt skálázódik.

Tippek a jó alakzatokhoz

• A sokszögpontok sorrendje számít: ha az él mentén körbemész (óramutató járásával megegyezően vagy ellentétesen), elkerülheted a kereszteződő, „csokornyakkendő” alakú formákat.
• Két, azonos pontszámú alakzat animálható: a transition: clip-path 0.4s simán alakít át egy hatszöget egy másik hatszöggé. A böngésző nem tud különböző pontszámú sokszögek között átmenetet számolni.
• A clip-path a box-shadow árnyékot és a szegélyeket is levágja. Ha egy kivágott alakzatnak árnyékot szeretnél adni, tedd a filter: drop-shadow() értéket egy szülőelemre.
• A kivágott területek nem kapnak kattintást vagy rámutatást, ami szabálytalan alakú gomboknál hasznos.