Aller au contenu
TextArray1.87.0
Tout en local

Générateur de triangles et de flèches CSS

Transformez une direction, une taille et une couleur en une règle CSS qui dessine un triangle ou une flèche — aucune image nécessaire.

Sortie
Outils connexes
Générateur CSS border-radiusnouveauOutils de développement
Générateur CSS clamp()Outils de développement
Générateur CSS gridOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur de triangles et de flèches CSS
Choisissez une direction, une largeur, une hauteur et une couleur, et cet outil écrit la règle CSS qui dessine la forme — un triangle pointant vers le haut, le bas, la gauche ou la droite, ou un triangle de coin pour un badge de style ruban. Il n'y a pas de fichier image à exporter et pas de balisage supplémentaire à ajouter : la forme est du CSS pur, elle se met donc à l'échelle proprement à n'importe quelle taille et reste nette sur les écrans haute densité. C'est le bloc de construction derrière les carets de menu déroulant, les indicateurs d'accordéon, les badges de ruban et le petit pointeur sur une info-bulle ou une bulle de chat.
Deux techniques sont supportées. L'astuce de bordure définit les bordures opposées d'une boîte de taille zéro comme transparentes et colore le reste — la recette classique, avec la plus large compatibilité des navigateurs. clip-path dessine plutôt la forme sur une boîte dimensionnée en utilisant un polygone, ce qui est plus facile à lire dans les outils de développement et à animer. Basculez entre elles avec l'option de technique.
Activez « Utiliser comme pseudo-élément ::after » pour une règle limitée à ::after, positionnée absolument contre le côté ou le coin que vous avez choisi, prête à déposer sur un élément qui a déjà un positionnement relatif — exactement ce dont a besoin un caret de menu déroulant ou le pointeur d'une info-bulle, sans HTML supplémentaire. Activez plutôt « Bulle de dialogue avec flèche attachée » et l'outil génère deux règles ensemble : une boîte de callout bordée et arrondie et une queue de flèche attachée à son bord, pointant de la direction que vous avez choisie — la forme derrière une bulle de chat ou un popover de texte d'aide.
Tout s'exécute dans votre navigateur : rien de ce que vous configurez n'est jamais envoyé nulle part. Copiez le CSS généré, téléchargez-le en tant que fichier .txt ou envoyez-le à l'entrée d'un autre outil — les générateurs de border-radius ou clip-path, par exemple — pour continuer à affiner la forme.
FAQ
Quelle technique dois-je utiliser, bordure ou clip-path ?
L'astuce de bordure a la plus large compatibilité des navigateurs et est la recette standard que vous verrez dans la plupart des tutoriels CSS. clip-path produit une boîte réelle et dimensionnée avec une zone de délimitation visible dans les outils de développement, ce qui la rend plus facile à déboguer ou animer — utilisez-la sauf si vous devez supporter des navigateurs très anciens.
Quelle est la différence entre une direction de bord et une direction de coin ?
Haut, bas, gauche et droite dessinent un triangle symétrique pointant dans cette direction — la forme derrière une flèche ou un indicateur de défilement. Les quatre options de coin dessinent un triangle rectangle remplissant un coin d'une boîte, la forme derrière un badge de ruban ou un effet de coin plié.
L'option pseudo-élément ajoute-t-elle aussi la règle de position pour le parent ?
Elle positionne le pseudo-élément lui-même avec position: absolute et les décalages corrects pour la direction que vous avez choisie. L'élément parent a toujours besoin de position: relative (ou d'un autre contexte de positionnement) pour que ce positionnement soit relatif à lui — ajoutez cette règle à n'importe quel sélecteur auquel vous attachez le pseudo-élément.
Puis-je utiliser la bulle de dialogue comme info-bulle ?
Oui. Elle génère une boîte bordée et arrondie plus une flèche attachée pointant dans la direction que vous avez choisie, ce qui est exactement la forme dont une info-bulle ou un popover de bulle de chat a besoin. Ajustez la largeur, la hauteur et la couleur pour correspondre à votre conception, puis stylisez davantage la boîte (arrière-plan, ombre, couleur du texte) dans votre propre feuille de style.
Quelque chose que je tape ou configure est-il chargé n'importe où ?
Non. Le CSS est généré entièrement dans votre navigateur à partir des options que vous choisissez — rien n'est envoyé à un serveur.