CSS Clip-Path generátor

Ez az eszköz egy CSS clip-path értéket generál egy alak-előbeállításból — kör, ellipszis, háromszög, ötszög, hatszög, csillag vagy lekerekített téglalap —, és élőben megmutatja a levágott alakot egy előnézeti dobozon, mielőtt kimásolnád a CSS-t. Nincs szükség a polygon() koordináták kézi kiszámítására a gyakori alakokhoz.

Mi ez az eszköz?

A clip-path az a CSS tulajdonság, amely elrejt mindent egy elem definiált régióján kívül, csak a belül lévő alakot hagyva láthatónak — az elem dobozának többi része továbbra is ott van a layoutban, csupán nincs kirajzolva. Alapvető alakfüggvényeket fogad el, mint a circle(), ellipse(), inset(), és a polygon(), amely utóbbi tetszőleges x/y koordinátapár-listát vesz fel bármilyen egyenes élű alak meghatározásához.

A polygon() koordináták a legnehezebben kézzel írható rész — egy ötszögnek, hatszögnek vagy csillagnak mindegyike több, precízen elhelyezett pontot igényel, és ha egyet elrontasz, az egész alak eltorzul. Ez az eszköz kiszámítja neked ezeket a koordinátákat egy alak-előbeállításból, azonnal frissíti az élő előnézetet, és megadja a pontos clip-path CSS-t másolásra.

Forrás: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — a specifikációk, amelyek a clip-path-et és annak alapvető alakfüggvényeit definiálják.

Miért érdemes használni?

Az élő előnézet egy valódi előnézeti dobozt vág a kiválasztott alakra, így a valós eredményt látod, nem koordinátákból kell elképzelned.
Hét alak-előbeállítás — kör, ellipszis, háromszög, ötszög, hatszög, csillag és lekerekített téglalap — lefedi a clip-path felhasználási esetek túlnyomó többségét polygon pontok kézi írása nélkül.
A kör, ellipszis és lekerekített téglalap előbeállítások méret/lekerekítés csúszkát tartalmaznak, így koordináták szerkesztése nélkül finomhangolhatod az alakot.
Szabványos clip-path CSS-t ad ki, amely bármely elemre készen áll beillesztésre.
Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova. Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

Válassz alakot a legördülő listából — kör, ellipszis, háromszög, ötszög, hatszög, csillag vagy lekerekített téglalap.
Kör, ellipszis és lekerekített téglalap alakoknál állítsd be a méret/lekerekítés csúszkát a vágás finomhangolásához.
Figyeld, ahogy az előnézeti doboz élőben frissül, miközben változtatod az alakot vagy a csúszkát.
Másold ki a generált clip-path CSS-t, és illeszd be a levágni kívánt elemre.
Kép esetén tömör szín helyett alkalmazd ugyanazt a clip-path tulajdonságot egy <img> elemre vagy egy background-image-et használó elemre.

Példa

Bemenet

Alak: Hatszög

Kimenet

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Egy szabályos hatszög vágás, gyakran használt jelvényszerű profilképekhez vagy funkcióikonokhoz.

Alapvető alakok vs. polygon()

A kör, az ellipszis és az inset (lekerekített téglalap) beépített CSS alapvető alakfüggvények saját egyszerű szintaxissal — egy vagy két sugár, plusz opcionális középpont-pozíció vagy sarok-lekerekítés. A háromszög, ötszög, hatszög és csillag nem beépített alakok; mindegyiket a polygon() fejezi ki, amely az alak körvonalát követő x/y koordinátapárok egyszerű listája. Ez az eszköz automatikusan kiszámítja ezeket a koordinátákat szabályos (egyenletesen elosztott) sokszögekhez és egy ötágú csillaghoz, ami a fáradságos rész, amit kézzel nehéz eltalálni.

Gyakori clip-path minták

Kör alakú avatár vagy jelvény: circle() közepes sugárral, gyakran négyzet alakú forrásképpel kombinálva, hogy a kör ne torzuljon ellipszissé.
Ferde szekcióelválasztó: egy egyedi polygon (itt nincs előbeállításként), amely megdönti egy teljes szélességű szekció felső vagy alsó élét egy nem téglalap alakú oldaltörésért.
Csillag alakú értékelés-ikon vagy jelvényforma: a csillag előbeállítás, hasznos díszítő alakként kézzel rajzolt SVG helyett egyszerű esetekben.
Hatszögletű fotórács: hatszög alakúra vágott képek méhsejt elrendezésben, gyakori portfólió/csapat-oldal minta.
Lekerekített téglalap mint könnyű alternatíva a border-radius helyett, amikor a vágásnak a túlcsorduló gyerektartalmat is le kell vágnia, mivel a border-radius önmagában további overflow:hidden nélkül nem vágja le a gyerekeket.

Párosítás más CSS eszközökkel

A clip-path-et gyakran CSS gradienssel kombinálják vágandó háttérként, vagy egy becsomagoló elemre alkalmazott box-shadow-val (mivel a clip-path egy elem saját árnyékát is levágja, egy szülő elemen lévő árnyék a szokásos megoldás egy olyan levágott alakhoz, amelynek mégis lebegnie kell).

→ CSS Gradient generátor · Border Radius Generátor · Box Shadow Generátor

Gyakori kérdések

Befolyásolja a clip-path az elem layout méretét?

Nem — az elem megtartja eredeti dobozméretét és pozícióját a layout szempontjából; a clip-path csak azt változtatja meg, ami ki van rajzolva. A környező elemek úgy rendeződnek el, mintha a vágás nem is lenne alkalmazva, ami meglepő lehet, ha azt várod, hogy a levágott alak egy átméretezett elemként viselkedjen.

Miért nem jelenik meg a box-shadow a levágott alakomon?

A clip-path az elem teljes megjelenítését levágja, beleértve az általa vetett árnyékot is, így egy kör- vagy sokszög-alakúra vágott elem saját box-shadow-ja levágódik a vágás határánál. Ha a látható alakot követő árnyékot szeretnél, alkalmazz box-shadow-t egy nem levágott, a levágott elemet körülvevő wrapper elemre.

Animálhatom vagy átmenetesíthetem egy clip-path alak változását?

Igen, de csak két, azonos típusú és azonos pontszámú clip-path érték között — például egy 6 pontos polygon() átmenettel egy másik 6 pontos polygon()-ra. Az alapvetően eltérő alakok közötti átmenet (egy circle() egy polygon()-ra) általában nem animálódik simán a böngészők között.

Használható a clip-path háttérképeken is, nem csak elemtartalmon?

A clip-path a teljes elemet vágja — beleértve a background-image-et, background-color-t, kereteket és tartalmat együtt — nem kifejezetten a hátteret. Ha csak egy háttérképet szeretnél levágni, miközben más tartalom vágatlan marad, alkalmazd a clip-path-et egy külön elemre, amely csak a hátteret tartalmazza.

Támogatott a clip-path minden modern böngészőben?

Igen — a clip-path alapvető alakfüggvényekkel (circle, ellipse, inset, polygon) az MDN kompatibilitási adatai szerint 2020 januárja óta széles körben elérhető (Baseline) a jelentősebb böngészőkben. Általában biztonságosan használható éles környezetben visszaesési megoldás nélkül a jelenlegi böngészőverziókon.