Direction
haut / 20 px
Sortie
border-bottom-color: #...
Outils de design
Générateur de triangle CSS avec aperçu en direct
Choisissez une direction, une taille et une couleur pour générer un triangle de bordure CSS pur avec un aperçu en direct et un code copiable.
CSSTriangleForme
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur de triangle CSS
Choisissez une direction, une taille et une couleur pour générer un triangle de bordure CSS pur avec un aperçu en direct et un code copiable.
最终边框魔术 (CSS)
Cas d’usage
- Créer une flèche pour une info-bulle ou un popover
- Générer une décoration de badge de coin
- Tester les dimensions du triangle de bordure CSS
Mode d’emploi
- Choisissez la direction du triangle
- Définissez la largeur, la hauteur et la couleur
- Prévisualisez et copiez le CSS
Exemples d’entrée et de sortie
FAQ
Comment fonctionne un triangle de bordure CSS ?
L'élément a une largeur et une hauteur nulles. Les bordures colorées et transparentes se combinent pour former le triangle visible.
Peut-il créer des polygones irréguliers ?
Cet outil génère des triangles directionnels standard. Utilisez un outil de tracé de détourage pour les polygones plus complexes.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Chemin de clip CSS
Chemin de clip CSS — Générateur de formes
Générez des formes de chemin de clip CSS à partir de préréglages et de contrôles simples avec un aperçu en direct – utile pour les cartes inclinées, les badges, les recadrages d'images et les mises en page décoratives.
CSS chemin de clip Forme
Générateur de ruban CSS
Générateur de ruban CSS — Styles de badges de coin
Générez visuellement du CSS de ruban de coin incliné pour les cartes. Modifiez le texte, les couleurs, le décalage, la largeur et la taille de la police pour les badges de statut de vente, épuisé et similaires.
CSS Badge Ruban