jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS shape() Functiegenerator

Genereer CSS shape()-functies voor niet-rechthoekige vormen met clip-path en shape-outside.

Tool laden...

Wat is CSS shape() Functiegenerator?

De CSS shape()-functie is een nieuwe shape-primitive die de legacy shape-functies verenigt en uitbreidt. In tegenstelling tot eerdere functies ondersteunt shape() percentage-coordinaten relatief aan het eigen element, reference box keywords (margin-box, padding-box, content-box, border-box) en vloeiende animatie tussen verschillende shapetypes.

Snel antwoord

CSS shape() creëert niet-rechthoekige shapes voor clip-path en shape-outside met percentage-coordinaten, reference box-ondersteuning en animeerbare overgangen. Chrome 139+, Safari 18.2+. Gebruik altijd een fallback voor niet-ondersteunde browsers.

Last updated: 2026-06-02

Beperkingen

  • Browserondersteuning is beperkt tot Chrome 139+, Edge 139+ en Safari 18.2+. Firefox ondersteunt shape() nog niet.
  • shape() polygon vereist expliciete eenheden op elke coördinaatwaarde.
  • Niet alle shapetypes interpoleren vloeiend — test animaties visueel voor implementatie.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Selecteer het shapetype: polygon, circle, ellipse, path of rect.
  2. Kies de reference box: margin-box, padding-box, content-box of border-box.
  3. Configureer de shape-coordinaten en schakel animatie-vriendelijke modus in voor CSS-transities.
  4. Kopieer de CSS met een fallback voor legacy shape-functies.

Waarvoor je het kunt gebruiken

  • Maak niet-rechthoekige afbeeldingsmaskeerders met clip-path en polygon.
  • Wikkel tekst rond cirkelvormige afbeeldingen met shape-outside.
  • Animeer tussen polygon en circle bij hover met CSS-transities.

Gebruik

Praktische voorbeelden

Voorbeeld

Geanimeerde heldenafbeelding-maskeerder

Een landingspagina toont een heldenafbeelding als polygon bij lading en gaat over naar een rechthoek bij scrollen. shape() animeert vloeiend met percentage-coordinaten.

Voorbeeld

Tekstomloop rond cirkelvormige profielfoto

Gebruik shape-outside met shape() circle en padding-box reference voor strakke tekstomloop rond een cirkelvormige foto.

Veelgemaakte fouten

  • Pixel-coordinaten gebruiken in shape() waar percentages responsiever zijn.
  • Aannemen dat shape() polygon dezelfde komma-gescheiden syntax gebruikt als polygon() — shape() vereist expliciete eenheden.
  • Shape() toepassen zonder fallback voor oudere browsers — Firefox ondersteunt het nog niet.

Verificatie

  1. Pas shape() CSS toe op een element en controleer of percentage-coordinaten correct schalen bij resize.
  2. Voeg een CSS-transition toe en wissel tussen twee shape()-waarden om vloeiende animatie te verifiëren.

FAQ

Vragen over CSS shape() Functiegenerator

Hoe verschilt shape() van polygon() en andere legacy functies?

shape() is een uniforme vervanging met percentage-coordinaten, reference box keywords en cross-type animatie-ondersteuning.

Kan ik animeren tussen polygon en circle met shape()?

Ja. shape() ondersteunt cross-type animatie zolang de coördinaatwaarden compatibel zijn voor interpolatie.

Welke reference box moet ik gebruiken?

Voor shape-outside is padding-box meestal beter. Voor clip-path is border-box de standaard.

Welke browsers ondersteunen shape()?

Chrome 139+, Edge 139+ en Safari 18.2+. Firefox ondersteunt het nog niet. Gebruik altijd een fallback.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool