CSS clip-pathgenerator
Gratis online CSS clip-pathgenerator, geen installatie nodig. Visuele editor voor het maken van custom shape clipping.
Over CSS Clip-Path Generator
CSS Clip-Path Generator is een visueel hulpmiddel voor het maken en testen van CSS clip-path-eigenschappen. Met clip-path kunt u elementen afsnijden tot basisvormen (cirkel, ellips, veelhoek) of een SVG-pad. Dit hulpmiddel biedt een real-time voorbeeldweergave en codegeneratie om u te helpen bij het ontwerpen van aangepaste vormen voor uw webprojecten.
Preset Vormen Gebruiken
Klik op een willekeurige knop met een preset vorm in het Presets paneel om deze direct toe te passen. Het hulpmiddel bevat 12 ingebouwde vormen: Driehoek, Trapezium, Parallellogram, Vijfhoek, Zeshoek, Zevenhoek, Achtste, Ster, Cirkel, Ellips, Inset Frame, en Rounded Inset. De voorbeeldweergave wordt onmiddellijk bijgewerkt om te tonen hoe de vorm het element afsnijdt.
Aangepast Pad Invoer
Voer een geldige clip-path-waarde in het veld Custom Path in. Ondersteunt alle clip-path-functies: polygon(), circle(), ellipse(), inset() en path(). Het hulpmiddel toont de gegenereerde CSS-code met zowel de standaard als de -webkit- prefix voor maximale browsercompatibiliteit. Klik op de knop Kopiëren om de code naar uw klembord te kopiëren.
Polygon Builder
De Polygon Builder biedt een visuele interface voor het maken van aangepaste veelhoekvormen. Elk punt wordt gedefinieerd door X- en Y-coördinaten (0-100%). Voeg meer punten toe (minimaal 3) om complexe veelhoeken te maken, of verwijder punten om te vereenvoudigen. De builder genereert automatisch geldige CSS polygon() syntaxis terwijl u coördinaten aanpast.
Voorbeeldopties
Pas de voorbeeldweergave aan door de schuifregelaar Grootte (100-400px) te verstellen en de kleurenkiezer te gebruiken om de achtergrondkleur van het element te wijzigen. Deze aanpassingen helpen u visualiseren hoe de clip-path eruit zal zien met verschillende elementgroottes en kleuren in uw ontwerp.
Browsercompatibiliteit
CSS clip-path wordt ondersteund in alle moderne browsers. Het hulpmiddel neemt automatisch -webkit-clip-path op voor Safari-compatibiliteit. Houd er rekening mee dat clip-path met de functie path() beperkte ondersteuning heeft in oudere browsers. Test uw doelbrowsers altijd voordat u naar productie gaat.
▶Waar wordt CSS clip-path voor gebruikt?
▶Wat is het verschil tussen polygon(), circle(), ellipse() en inset()?
▶Hoe maak ik een onregelmatige veelhoek?
▶Waarom werkt mijn clip-path niet in sommige browsers?
▶Kan ik clip-path wijzigingen animeren?
▶Wat betekenen de X- en Y-percentages in punten van veelhoeken?
▶Hoe gebruik ik SVG-padgegevens met clip-path?
▶Is er een limiet aan het aantal veelhoekpunten?
Als deze tool je heeft geholpen, denk dan eens aan het geven van een kop koffie aan mij.
Koop me een kop koffie.