⭐ 0
🔍
Tekst Bilde PDF og dokumenter Lyd Musikk Elektronikk Tid Verktøy Validatorer Esoterisk Spill

CSS Clip-Path Generator

Tegn vilkårlige polygonformer – inkludert konkave hakk – ved å dra punkter på en direkte forhåndsvisningsboks eller ditt eget opplastede bilde, og kopier den resulterende CSS clip-path: polygon(...)-verdien.

Dra et punkt for å flytte det. Klikk nær en kant for å legge til et punkt der. Dobbeltklikk på et punkt for å fjerne det (minimum 3 punkter).

Behandler... 0%

Resultat

CSS clip-path aksepterer en polygon()-funksjon laget av et hvilket som helst antall x/y-koordinatpar, noe som betyr at den kan skjære ut en boks i former langt utover de enkle rektanglene og sirklene de fleste strekker seg etter. Fangsten er at det å skrive disse koordinatene for hånd er kjedelig og nesten umulig å få riktig for noe utover en grunnleggende trekant - denne generatoren gjør den koordinatlisten til et sett med trekkbare punkter på en direkte forhåndsvisning, slik at formen du ser alltid er formen CSS produserer.

Hvert punkt på forhåndsvisningen lagres som en prosentandel av boksens bredde og høyde, som er nøyaktig hvordan selve clip-path: polygon() fungerer under panseret: en form bygget på denne måten holder proporsjonene korrekte uansett hvilken størrelse elementet ender på på en ekte side, fra en liten ikonmaske til et heltebanner i full bredde. Dra et hvilket som helst punkt for å omforme omrisset, klikk nær en kant for å legge til et nytt punkt akkurat der du klikket, eller dobbeltklikk på et eksisterende punkt for å slette det – redigeringsprogrammet beholder alltid minst tre punkter, siden en polygon ikke kan eksistere med færre.

De seks medfølgende forhåndsinnstillingene er valgt for å bevise at klippebane kan gjøre mer enn konvekse former: stjernen og pilen er begge avhengige av refleksvinkler som peker innover, snakkeboblen skjærer ut en trekantet hale ut av et ellers vanlig rektangel, og billettstubben bulker to hakk inn i motsatte kanter slik en ekte perforert billett ser ut. Last inn en forhåndsinnstilling og fortsett å dra derfra - ingenting med editoren låser deg til startformen.

Last opp ditt eget bilde for å forhåndsvise utklippsbanen mot ekte innhold i stedet for en vanlig boks, eller hopp over opplastingen helt og forhåndsvisningen faller tilbake til et stripete mønster slik at den kuttede formen forblir tydelig synlig uansett. Som alle verktøy på dette nettstedet kjører det hele lokalt i nettleseren: ingen bilder forlater enheten din, og generatoren fortsetter å jobbe offline når siden er lastet inn.

🛡️
Utført i nettleser

Filene og inngangene dine forlater aldri denne enheten. Behandlingen kjører helt offline. 100 % sikker.

Godkjente formater og regler

  • Dragbare punkthåndtak (mus, berøring og piltastdykking) med live-oppdatering av klippbane: polygon(...)-utgang når du flytter dem.
  • Klikk nær hvilken som helst kant for å sette inn et nytt punkt der, dobbeltklikk på et punkt for å fjerne det (minimum 3 punkter beholdes alltid).
  • Forhåndsinnstillinger for pil-, stjerne-, sekskant-, taleboble- og billettstubbformer – inkludert genuint konkave, ikke-konvekse konturer – pluss valgfri bildeopplasting slik at du kan forhåndsvise klippet på ditt eget bilde.

Viktige fordeler

✓ Hvert punkt dra omskriver den levende utklippsbanen på forhåndsvisningen umiddelbart, slik at du ser den nøyaktige formen før du kopierer en enkelt linje med CSS.
✓ Poeng lagres som prosenter, akkurat som clip-path: polygon() i seg selv, slik at en form bygd i en hvilken som helst forhåndsvisningsstørrelse forblir korrekt ved hvilken som helst elementstørrelse i din egen layout.
✓ Seks startforhåndsinnstillinger – inkludert en stjerne, en snakkeboble og en billettstubb med hakk – dekker former som ellers ville kreve mye manuell koordinatgjetting.

Brukssaker

  • • Skjær ut et heltebilde eller kortminiatyrbilde i en pil, stjerne eller sekskant ved å dra forhåndsinnstilte punkter, og kopier deretter den nøyaktige klippbanen: polygon(...) CSS.
  • • Bygg en genuint konkav form – en taleboblehale eller en billettstump med hakk – som en enkel kantradius eller maskebilde aldri kunne produsere.
  • • Last opp ditt eget bilde for å sjekke nøyaktig hvordan en egendefinert polygonbeskjæring vil se ut før du sender klippbaneverdien til en ekte side.