Generátor CSS Clip-Path

Tento nástroj generuje CSS hodnotu clip-path z předvolby tvaru — kruh, elipsa, trojúhelník, pětiúhelník, šestiúhelník, hvězda nebo obdélník se zaoblenými rohy — a zobrazuje oříznutý tvar naživo na náhledovém boxu předtím, než zkopírujete CSS. Není potřeba ručně počítat souřadnice polygon() pro běžné tvary.

Co je tento nástroj?

clip-path je CSS vlastnost, která skryje vše mimo definovanou oblast elementu a ponechá viditelný pouze tvar uvnitř — zbytek boxu elementu je stále přítomný v layoutu, jen se nevykresluje. Přijímá funkce základních tvarů jako circle(), ellipse(), inset() a polygon(), poslední z nich bere libovolný seznam párů souřadnic x/y k definování jakéhokoli přímo hraněného tvaru.

Souřadnice polygon() jsou nejtěžší částí na ruční napsání — pětiúhelník, šestiúhelník nebo hvězda každý potřebuje několik přesně umístěných bodů, a chyba v jednom zdeformuje celý tvar. Tento nástroj za vás tyto souřadnice vypočítá z předvolby tvaru, okamžitě aktualizuje živý náhled a dá vám přesné CSS pro clip-path ke zkopírování.

Zdroj: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — specifikace definující clip-path a jeho funkce základních tvarů.

Proč ho používat?

Živý náhled ořízne skutečný náhledový box na zvolený tvar, takže vidíte skutečný výsledek místo toho, abyste si ho museli představovat ze souřadnic.
Sedm předvoleb tvarů — kruh, elipsa, trojúhelník, pětiúhelník, šestiúhelník, hvězda a obdélník se zaoblenými rohy — pokrývá naprostou většinu případů použití clip-path bez ručního psaní bodů polygon.
Předvolby kruh, elipsa a zaoblený obdélník obsahují posuvník velikosti/zaoblení, takže tvar můžete doladit bez úpravy souřadnic.
Vypisuje standardní CSS clip-path připravené ke vložení do libovolného elementu.
Běží kompletně ve vašem prohlížeči — nic, co nastavíte, se nikam nenahrává. Zdarma, bez registrace, funguje na mobilu.

Jak se používá

Vyberte tvar z rozbalovacího seznamu — kruh, elipsa, trojúhelník, pětiúhelník, šestiúhelník, hvězda nebo obdélník se zaoblenými rohy.
U kruhu, elipsy a zaobleného obdélníku upravte posuvník velikosti/zaoblení, abyste doladili oříznutí.
Sledujte, jak se náhledový box aktualizuje naživo při změně tvaru nebo posuvníku.
Zkopírujte vygenerované CSS clip-path a vložte ho na element, který chcete oříznout.
Pro obrázek místo plné barvy použijte stejnou vlastnost clip-path na <img> nebo element s background-image.

Příklad

Vstup

Tvar: šestiúhelní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%);

Oříznutí do pravidelného šestiúhelníku, běžně používané pro odznak-styl profilových fotek nebo funkčních ikon.

Základní tvary vs. polygon()

Kruh, elipsa a inset (obdélník se zaoblenými rohy) jsou vestavěné CSS funkce základních tvarů s vlastní jednoduchou syntaxí — poloměr nebo dva, plus volitelná středová pozice nebo zaoblení rohů. Trojúhelník, pětiúhelník, šestiúhelník a hvězda nejsou vestavěné tvary; všechny se vyjadřují pomocí polygon(), plochého seznamu párů souřadnic x/y sledujících obrys tvaru. Tento nástroj automaticky vypočítá tyto souřadnice pro pravidelné (rovnoměrně rozmístěné) polygony a pěticípou hvězdu, což je ta nudná část, kterou je těžké udělat ručně správně.

Běžné vzory clip-path

Kruhový avatar nebo odznak: circle() se středním poloměrem, často kombinovaný se čtvercovým zdrojovým obrázkem, aby se kruh nenatáhl do elipsy.
Šikmý dělič sekce: vlastní polygon (zde není zahrnut jako předvolba), který zkosí horní nebo dolní okraj sekce v plné šířce pro nepravoúhlý zlom stránky.
Ikona hvězdičkového hodnocení nebo tvar odznaku: předvolba hvězdy, užitečná jako dekorativní tvar místo ručně kresleného SVG pro jednoduché případy.
Fotogalerie v šestiúhelnících: obrázky oříznuté šestiúhelníkem uspořádané do voštinového layoutu, běžný vzor portfolio/tým stránek.
Obdélník se zaoblenými rohy jako lehčí alternativa border-radius, když potřebujete, aby oříznutí zakrylo i přesahující obsah potomků, protože samotný border-radius potomky bez dalšího overflow:hidden neořízne.

Kombinace s dalšími CSS nástroji

clip-path se často kombinuje s CSS gradientem jako oříznutým pozadím, nebo s box-shadow aplikovaným na obalující element (protože clip-path ořízne i vlastní stín elementu, stín na rodičovském elementu je obvyklé řešení pro oříznutý tvar, který stále má vypadat, jako by se vznášel).

→ Generátor CSS gradientů · Generátor border-radius · Generátor box-shadow

Časté dotazy

Ovlivňuje clip-path velikost layoutu elementu?

Ne — element si zachovává původní velikost boxu a pozici pro účely layoutu; clip-path mění pouze to, co se vykresluje. Okolní elementy jsou uspořádány, jako by oříznutí nebylo použito, což vás může překvapit, pokud čekáte, že se oříznutý tvar bude chovat jako zmenšený element.

Proč se u mého oříznutého tvaru neukazuje box-shadow?

clip-path ořízne vykreslení celého elementu, včetně jakéhokoli stínu, který vrhá, takže vlastní box-shadow elementu oříznutého kruhem nebo polygonem se ořízne na hranici oříznutí. Chcete-li stín, který sleduje viditelný tvar, aplikujte box-shadow místo toho na neořezaný obalující element kolem oříznutého.

Můžu tvar clip-path animovat nebo přechodit?

Ano, ale pouze mezi dvěma hodnotami clip-path stejného typu a se stejným počtem bodů — například jeden polygon() se 6 body přecházející do jiného polygon() se 6 body. Přechod mezi zásadně odlišnými tvary (circle() na polygon()) obecně nebude plynule animovat napříč prohlížeči.

Lze clip-path použít na obrázky pozadí, ne jen na obsah elementu?

clip-path ořízne celý element — včetně jeho background-image, background-color, okrajů a obsahu dohromady — místo pozadí konkrétně. Pokud chcete oříznout jen obrázek pozadí a zachovat ostatní obsah neoříznutý, aplikujte clip-path na samostatný element, který drží jen pozadí.

Je clip-path podporován ve všech moderních prohlížečích?

Ano — clip-path s funkcemi základních tvarů (circle, ellipse, inset, polygon) je široce dostupný podle Baseline napříč hlavními prohlížeči od ledna 2020, podle kompatibilních dat MDN. Obecně je bezpečné ho v produkci používat bez fallbacku pro aktuální verze prohlížečů.