Generátor CSS clip-path

Tento nástroj generuje hodnotu CSS clip-path z prednastaveného tvaru — kruh, elipsa, trojuholník, päťuholník, šesťuholník, hviezda alebo zaoblený obdĺžnik — a naživo zobrazí orezaný tvar na náhľadovom boxe predtým, než skopírujete CSS. Nie je potrebné ručne počítať súradnice pre polygon() pri bežných tvaroch.

Čo je tento nástroj?

clip-path je CSS vlastnosť, ktorá skrýva všetko mimo definovanej oblasti prvku, pričom viditeľný zostáva len tvar vo vnútri — zvyšok boxu prvku je stále v rozložení, len sa nevykresľuje. Prijíma základné funkcie tvarov ako circle(), ellipse(), inset() a polygon(), pričom posledná menovaná berie ľubovoľný zoznam dvojíc súradníc x/y na definovanie akéhokoľvek tvaru s rovnými hranami.

Súradnice polygon() sú najťažšou časťou na ručné písanie — päťuholník, šesťuholník alebo hviezda potrebujú každý niekoľko presne umiestnených bodov a chyba pri jednom skreslí celý tvar. Tento nástroj tieto súradnice vypočíta za vás z prednastaveného tvaru, okamžite aktualizuje živý náhľad a poskytne vám presné CSS clip-path na skopírovanie.

Zdroj: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — špecifikácie definujúce clip-path a jeho funkcie základných tvarov.

Prečo ho používať?

Živý náhľad oreže skutočný náhľadový box do zvoleného tvaru, takže vidíte skutočný výsledok namiesto predstavovania si ho zo súradníc.
Sedem prednastavených tvarov — kruh, elipsa, trojuholník, päťuholník, šesťuholník, hviezda a zaoblený obdĺžnik — pokrýva drvivú väčšinu prípadov použitia clip-path bez ručného písania bodov polygon().
Prednastavenia kruh, elipsa a zaoblený obdĺžnik obsahujú posuvník veľkosti/zaoblenia, takže tvar môžete doladiť bez úpravy súradníc.
Generuje štandardné CSS clip-path pripravené na vloženie do akéhokoľvek prvku.
Beží úplne vo vašom prehliadači — nič, čo nakonfigurujete, sa nikam nenahráva. Zadarmo, bez registrácie, funguje na mobile.

Ako sa používa

Vyberte tvar z rozbaľovacieho zoznamu — kruh, elipsa, trojuholník, päťuholník, šesťuholník, hviezda alebo zaoblený obdĺžnik.
Pri tvaroch kruh, elipsa a zaoblený obdĺžnik upravte posuvník veľkosti/zaoblenia na doladenie orezania.
Sledujte, ako sa náhľadový box aktualizuje naživo pri zmene tvaru alebo posuvníka.
Skopírujte vygenerované CSS clip-path a vložte ho na prvok, ktorý chcete orezať.
Pre obrázok namiesto plnej farby aplikujte rovnakú vlastnosť clip-path na prvok <img> alebo prvok s background-image.

Príklad

Vstup

Tvar: Šesťuholník

Výstup

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%);

Orezanie do pravidelného šesťuholníka, bežne používané pre profilové fotky v štýle odznaku alebo ikony funkcií.

Základné tvary vs. polygon()

Kruh, elipsa a inset (zaoblený obdĺžnik) sú vstavané CSS funkcie základných tvarov s vlastnou jednoduchou syntaxou — jeden alebo dva polomery, plus voliteľná stredová pozícia alebo zaoblenie rohov. Trojuholník, päťuholník, šesťuholník a hviezda nie sú vstavané tvary; všetky sú vyjadrené pomocou polygon(), plochého zoznamu dvojíc súradníc x/y sledujúcich obrys tvaru. Tento nástroj automaticky vypočíta tieto súradnice pre pravidelné (rovnomerne rozmiestnené) mnohouholníky a päťcípu hviezdu, čo je tá pracná časť, ktorú treba urobiť ručne správne.

Bežné vzory clip-path

Kruhový avatar alebo odznak: circle() so stredným polomerom, často kombinovaná so štvorcovým zdrojovým obrázkom, aby sa kruh nenatiahol do elipsy.
Šikmý oddeľovač sekcie: vlastný polygon (nie zahrnutý ako prednastavenie tu), ktorý šikmo zrezáva horný alebo dolný okraj sekcie na celú šírku pre nepravidelný zlom stránky.
Tvar hviezdičkového hodnotenia alebo odznaku: prednastavenie hviezdy, užitočné ako dekoratívny tvar namiesto ručne kresleného SVG pri jednoduchých prípadoch.
Šesťuholníková fotogaléria: obrázky orezané do šesťuholníka usporiadané v plástovom rozložení, bežný vzor portfólia/tímovej stránky.
Zaoblený obdĺžnik ako ľahšia alternatíva k border-radius, keď potrebujete, aby orezanie odrezalo aj pretekajúci obsah potomkov, keďže samotný border-radius bez ďalšieho overflow:hidden potomkov neoreže.

Kombinácia s ďalšími CSS nástrojmi

clip-path sa často kombinuje s CSS gradientom ako orezávaným pozadím alebo s box-shadow aplikovaným na obalujúci prvok (keďže clip-path oreže aj vlastný tieň prvku, tieň na nadradenom prvku je bežné riešenie pre orezaný tvar, ktorý má stále pôsobiť, akoby sa vznášal).

→ Generátor CSS gradientu · Generátor border-radius · Generátor box-shadow

Časté otázky

Ovplyvňuje clip-path veľkosť rozloženia prvku?

Nie — prvok si zachováva pôvodnú veľkosť a pozíciu boxu na účely rozloženia; clip-path mení len to, čo sa vykresľuje. Okolité prvky sú rozložené, akoby orezanie nebolo aplikované, čo vás môže prekvapiť, ak očakávate, že sa orezaný tvar bude správať ako zmenšený prvok.

Prečo sa box-shadow nezobrazuje na mojom orezanom tvare?

clip-path oreže celé vykresľovanie prvku, vrátane akéhokoľvek tieňa, ktorý vrhá, takže vlastný box-shadow prvku orezaného do kruhu alebo mnohouholníka sa preruší na hranici orezania. Ak chcete tieň, ktorý sleduje viditeľný tvar, aplikujte box-shadow na neorezaný obalujúci prvok okolo orezaného.

Môžem animovať alebo prechodovať tvar clip-path?

Áno, ale len medzi dvoma hodnotami clip-path rovnakého typu a s rovnakým počtom bodov — napríklad jeden polygon() so 6 bodmi prechádzajúci na iný polygon() so 6 bodmi. Prechod medzi zásadne odlišnými tvarmi (circle() na polygon()) sa vo väčšine prehliadačov plynulo neanimuje.

Dá sa clip-path použiť na obrázky pozadia, nielen na obsah prvku?

clip-path oreže celý prvok — vrátane jeho background-image, background-color, okrajov a obsahu spolu — namiesto len pozadia samostatne. Ak chcete orezať len obrázok pozadia a ostatný obsah ponechať neorezaný, aplikujte clip-path na samostatný prvok, ktorý drží len pozadie.

Je clip-path podporovaný vo všetkých moderných prehliadačoch?

Áno — clip-path so základnými funkciami tvarov (circle, ellipse, inset, polygon) je podľa údajov o kompatibilite MDN „Baseline widely available“ vo všetkých hlavných prehliadačoch od januára 2020. Vo všeobecnosti je bezpečné ho použiť v produkcii bez záložného riešenia pre súčasné verzie prehliadačov.