CSS-formgenerator

Skapa polygon, stjärna, bricka, sexkanter och chevron former med modern CSS klippväg geometri.

Körs i din webbläsare. Dina filer lämnar aldrig din enhet. Se hur du kontrollerar det

…

Så gör du

  1. 1
    Steg 1: öppna CSS-formgenerator och fyll i dina uppgifter

    Skriv dina siffror eller din text, lägg till filen eller välj de alternativ du behöver. Inget laddas upp: allt stannar i din webbläsare.

  2. 2
    Steg 2: vad CSS-formgenerator gör

    Skapa polygon, stjärna, bricka, sexkanter och chevron former med modern CSS klippväg geometri.

  3. 3
    Steg 3: läs resultatet och jämför

    Resultatet visas direkt. Ändra ett värde för att se hur svaret förändras och behåll den siffra som passar ditt fall.

  4. 4
    Steg 4: kopiera eller spara

    Kopiera resultatet eller ladda ner det. Bekräfta det med den officiella källan eller en rådgivare inför ett viktigt beslut.

Om det här verktyget

Clip-path allows developers to cut HTML elements and images into precise geometric polygons and shapes without needing Photoshop or SVG masks. Select from popular presets, inspect the rendered mask in real time, and copy pure CSS polygon coordinates ready for production.

Tips för bästa resultat

Innan du börjar, ta en stund att läsa alternativen och prova verktyget med ett litet exempel först. Allt körs i webbläsaren på din egen enhet; inget du skriver eller lägger till laddas upp och att stänga fliken raderar allt. Om något ser fel ut, ladda om sidan och försök igen, eller använd rapportlänken på den här sidan för att berätta vad som gick fel. Om ett resultat fortfarande ser fel ut, ändra ett värde i taget för att se vilket fält som påverkar mest. Bokmärk den här sidan om du ska använda den igen.

I korthet

Vanliga frågor

Vad är CSS-klippväg?

The `clip-path` CSS property creates a clipping region that determines which parts of an element or image are visible.

Vilka former ingår som förinställningar?

Förinställningar inkluderar triangel, sexkanter, 5-punktsstjärna, produkt rabatt badge, navigering chevron och cirkulära masker.

Kan jag ta bilder och videoklipp med den här?

Yes. Apply the generated clip-path CSS rule to any `<img>`, `<video>`, `<div>`, or card component in your stylesheet.

Påverkar klippvägen elementklickbara hitboxes?

I moderna webbläsare svarar endast det synliga, oavklippta området av elementet på pekar- och klickhändelser.

Helt gratisIngen avgift, ingen registrering
Filer förblir privataAllt körs i din webbläsare
Enkelt på ditt språkFinns på många språk