Comment utiliser : Générateur de bordure zigzag CSS
- L'aperçu commence avec un bord inférieur en zigzag ; réglez le nombre de dents avec Répétitions.
- Choisissez Festons pour des dents arrondies ou Marches pour un escalier.
- Choisissez Les deux pour un rendu de ticket de caisse ou de billet.
- Copiez le CSS.
Bords en zigzag avec clip-path
Chaque dent est constituée de deux points de polygone : un sur le bord, un autre rentrant de la profondeur de la dent. Comme les positions x sont exprimées en pourcentages, les dents couvrent toujours toute la largeur ; définissez la profondeur en px pour conserver leur hauteur. Pour un rendu de ticket de caisse, découpez les deux bords avec une faible profondeur et de nombreuses répétitions.
D'autres formes de bord sont disponibles dans le Générateur de séparateurs de section.
Aussi recherché comme : bordure zigzag css, bord zigzag css, bord déchiqueté css, bordure dents de scie css, bord festonné css, bord ticket de caisse css, bord ticket css, clip-path zigzag.
Outils complémentaires : Générateur de bordure zigzag CSS
- Section inclinée CSS — Créez des sections inclinées, en biais ou en diagonale, le style classique des pages d'atterrissage, avec une seule règle clip-path.
- Séparateur de section courbe — Arrondissez le bord d'un hero ou d'une section avec une courbe — convexe, creusée, un angle courbé, une douce vague ou des festons — uniquement en CSS.
- Générateur triangle CSS — Créez un triangle en CSS pur pour une flèche d'infobulle, un caret de menu déroulant ou une bulle de dialogue : choisissez l'une des 8 directions, la largeur, la hauteur et la couleur, puis copiez soit l'astuce classique des bordures, soit une version plus simple en clip-path.
- Générateur clip-path CSS — Découpez images et éléments en n'importe quelle forme : choisissez l'une des 15 formes de départ (triangle, hexagone, étoile, flèche, chevron, bulle de dialogue, cercle, ellipse, rectangle arrondi en inset…), puis déplacez les points sur un exemple ou sur votre propre image.
Questions fréquentes
Comment créer un bord en zigzag en CSS ?
Utilisez clip-path: polygon() avec des points qui alternent entre le bord et la profondeur de coupe sur toute la largeur. Choisissez Zigzag ici, réglez les répétitions et copiez le CSS.
Puis-je créer un bord de ticket de caisse déchiré ?
Oui : choisissez Zigzag, le bord Les deux, une faible profondeur (8 à 12 px) et 20 répétitions ou plus.
Comment garder des dents de même taille sur les grands écrans ?
Le nombre de dents étant fixe, les dents s'élargissent sur les grands écrans. Pour une largeur de dent fixe, utilisez plutôt un masque répétitif avec conic-gradient, ou augmentez le nombre de dents pour le bureau via une requête média.
Puis-je installer Générateur de bordure zigzag CSS en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de bordure zigzag CSS est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.