CSS Clip-path-generator
Clip-path-generatorn skapar clip-path-värden för vanliga former – triangel, pil, femhörning, sexhörning, stjärna, chevron, cirkel, ellips och rundad inset – med förhandsvisning i realtid.
Om verktyget
Clip-path-generatorn skapar clip-path-värden för vanliga former – triangel, pil, femhörning, sexhörning, stjärna, chevron, cirkel, ellips och rundad inset – med förhandsvisning i realtid.
Så använder du det
- Välj en form i listan.
- Välj fyllnadsfärg för förhandsvisningen.
- Klicka på Copy CSS och använd clip-path på valfritt element eller bild.
Bra att veta
- clip-path döljer allt utanför en form, så ingen bildmask eller SVG-fil behövs.
- polygon() tar en lista med x y-punkter i procent, som skalas med elementet.
- circle(50% at 50% 50%) beskär ett element till en centrerad cirkel.
- inset() med round ger rundade hörn på en rektangulär beskärning.
- Grundformerna i clip-path stöds i alla aktuella större webbläsare.
Körs helt i din webbläsare – inget du skriver in laddas upp eller sparas.
Vanliga frågor
Hur beskär jag en bild till en form med CSS?
Använd clip-path på bilden, till exempel clip-path: polygon(50% 0%, 0% 100%, 100% 100%); för en triangel.
Vad är skillnaden mellan clip-path och mask?
clip-path skär ut en vektorform med skarpa kanter. mask använder en bild eller gradient och kan ge mjuka, delvis genomskinliga kanter.
Kan clip-path animeras?
Ja, om båda formerna använder samma funktion och samma antal punkter kan webbläsaren göra en övergång mellan dem.
Påverkar clip-path klick?
Ja. Områden utanför den beskurna formen renderas inte och tar inte emot pekarhändelser.