clip-path med polygon() og circle()

clip-path beskærer det synlige område af et element til en angivet form. Alt uden for formen er usynligt, men optager stadig plads i layoutet.

Beskær et element til en cirkulær form. Argumentet er radius:

Beskær til en ellipse ved at angive x-radius, y-radius og eventuelt en centerposition:

Den mest effektive clip-path-funktion. Definer en polygon ved at angive koordinatpar for x og y:

Beskær til et rektangel med valgfrit afrundede hjørner. Argumenterne er afstande fra kanterne:

Opret vinklede overgange mellem sektioner på en side:

clip-path med det samme antal punkter kan animeres mellem tilstande for at skabe afslørings- og morphing-animationer:

Til enkle afrundede former er border-radius bedre — den fungerer sammen med baggrund og kant. Brug clip-path, når du har brug for ikke-rektangulære former, som border-radius ikke kan skabe.

path() accepterer en SVG-stistreng til vilkårlige former:

clip-path opretter en ny stablingskontekst og kan udløse gengivelse ved hvert billede, når den animeres. Det er mere ressourcekrævende at animere clip-path end transform eller opacity — kombiner dem med omtanke.

Koordinatsystemet for clip-path er elementets kantboks (eller margenboks for SVG). Procenter er relative til elementets dimensioner.

clip-path beskærer elementer til geometriske former. circle() og ellipse() opretter afrundede beskæringer. polygon() definerer enhver form med flere hjørner. inset() beskærer til et rektangel med valgfri afrunding. Animer mellem polygonformer med samme antal punkter for at skabe dramatiske afsløringer. Brug path() til vilkårlige SVG-baserede former.