Generátor CSS Clip-path
CSS clip-path generátor vytváří hodnoty clip-path pro běžné tvary — trojúhelník, šipku, pětiúhelník, šestiúhelník, hvězdu, chevron, kruh, elipsu a zaoblený inset — s živým náhledem.
O tomto nástroji
CSS clip-path generátor vytváří hodnoty clip-path pro běžné tvary — trojúhelník, šipku, pětiúhelník, šestiúhelník, hvězdu, chevron, kruh, elipsu a zaoblený inset — s živým náhledem.
Jak ho použít
- Vyber tvar ze seznamu.
- Zvol barvu výplně pro náhled.
- Klikni na Copy CSS a použij clip-path na libovolný prvek nebo obrázek.
Dobré vědět
- clip-path skryje vše mimo zvolený tvar, takže nepotřebuješ masku z obrázku ani SVG soubor.
- polygon() přijímá seznam bodů x y v procentech, které se škálují spolu s prvkem.
- circle(50% at 50% 50%) ořízne prvek do kruhu uprostřed.
- inset() s round přidá obdélníkovému ořezu zaoblené rohy.
- Základní tvary clip-path podporují všechny současné hlavní prohlížeče.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS vyříznu obrázek do tvaru?
Použij na obrázek clip-path, například clip-path: polygon(50% 0%, 0% 100%, 100% 100%); pro trojúhelník.
Jaký je rozdíl mezi clip-path a mask?
clip-path ořízne vektorový tvar s ostrými okraji. mask používá obrázek nebo gradient a umí vytvořit měkké, částečně průhledné okraje.
Dá se clip-path animovat?
Ano, pokud oba tvary používají stejnou funkci a stejný počet bodů, prohlížeč mezi nimi dokáže plynule přejít.
Ovlivňuje clip-path klikání?
Ano. Oblasti mimo oříznutý tvar se nevykreslují a nepřijímají události ukazatele.