Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de triangles CSS

CSS Triangle Generator

Générez un triangle isocèle en pur CSS — direction, base, hauteur et couleur au choix — grâce à la technique des bordures, net à toute densité d'écran.

Parcours de la tâche / de l'entrée au résultat

Choisissez la direction

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de triangles CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment créer un triangle CSS

  1. 01

    Choisissez la direction

    Choisissez Haut, Droite, Bas ou Gauche sous Direction. L'aperçu se met à jour instantanément — la technique colore une bordure et garde les bordures voisines transparentes. L'espace de travail démarre avec un triangle vers le haut.

  2. 02

    Définissez la taille

    Réglez Largeur de base et Hauteur du triangle entre 8 et 180 px, par pas de 1 px. Vers le haut ou le bas, la largeur est la base et la hauteur mesure la portée de la pointe. Vers la gauche ou la droite, la hauteur est la base verticale et la largeur mesure la portée horizontale. Par défaut, la forme mesure 72 px horizontalement et 64 px verticalement.

  3. 03

    Choisissez la couleur de remplissage

    Définissez la Couleur de remplissage avec n'importe quelle valeur hexadécimale à six chiffres — la valeur par défaut est #0f4cff. L'aperçu en direct et la déclaration border-color générée restent toujours synchronisés, donc ce que vous voyez est exactement ce qui est copié.

  4. 04

    Vérifiez l'état de l'aperçu

    L'aperçu en direct se re-rend à chaque modification et le badge d'état affiche CSS VALIDE quand toutes les valeurs sont dans les limites. Une valeur hors limites le fait basculer sur VÉRIFIER LES VALEURS et bloque la copie et le téléchargement jusqu'à ce que le contrôle surligné soit corrigé.

  5. 05

    Essayez le préréglage d'exemple

    Charger un exemple crée un triangle pointant à droite, avec une portée horizontale de 104 px, une base verticale de 86 px et le remplissage #ffd11a. Réinitialiser restaure les valeurs par défaut.

  6. 06

    Copiez ou téléchargez le CSS

    Cliquez sur Copier le CSS pour copier la règle .triangle dans le presse-papiers, ou sur Télécharger le .css pour l'enregistrer sous toolars-triangle.css. La règle met la largeur et la hauteur à zéro et déclare les quatre bordures, prête à coller dans n'importe quelle feuille de style.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de triangles CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de triangles CSS fait vraiment

Les chevrons de menus déroulants, les pointes d'infobulles et les séparateurs de fil d'Ariane ont tous besoin d'un petit triangle net, et un fichier image est le mauvais outil pour cela : il devient flou sur les écrans haute densité et ajoute une requête à la page. Un triangle construit à partir de bordures CSS est indépendant de la résolution et se recolore avec une seule valeur hexadécimale. Générateur de triangles CSS rend la forme localement pendant que vous réglez direction, taille et remplissage, donc itérer ne prend que quelques secondes. Quand le résultat convient, un clic place la règle .triangle terminée dans votre presse-papiers.

Questions fréquentes

Comment fonctionne un triangle en pur CSS ?
L'élément reçoit une largeur et une hauteur nulles plus quatre bordures. Colorer une bordure pendant que les deux bordures adjacentes restent transparentes laisse un triangle propre — la règle .triangle générée montre exactement quelle bordure porte la Couleur de remplissage pour la direction choisie, et la bordure opposée à la pointe s'effondre à zéro.
Quelles tailles puis-je générer ?
La Largeur de base et la Hauteur du triangle acceptent toutes deux des valeurs de 8 à 180 px par pas de 1 px. Une valeur hors limites fait basculer l'état de l'aperçu sur VÉRIFIER LES VALEURS et bloque la copie et le téléchargement jusqu'à ce que le contrôle surligné soit corrigé, donc la règle exportée est toujours valide.
Le triangle est-il toujours symétrique ?
Oui. Pour Haut et Bas, les deux bordures latérales transparentes prennent chacune la moitié de la largeur de base, donc le sommet reste centré au-dessus de la base ; pour Gauche et Droite, les bordures supérieure et inférieure se partagent la hauteur de la même façon. Chaque triangle généré est isocèle — les formes inclinées ou à angle droit demandent une autre technique comme clip-path.
Comment recolorer ou redimensionner le triangle ensuite ?
Modifiez directement la règle générée : une seule bordure porte la couleur de remplissage, les deux bordures adjacentes sont transparentes, et la bordure opposée à la pointe est à zéro. Changer l'unique valeur hexadécimale le recolore, et ajuster les largeurs de bordure le reforme — plus besoin de générateur après la première copie.
La sortie fonctionnera-t-elle dans tous les navigateurs ?
Oui. Les triangles à base de bordures sont l'une des plus anciennes techniques CSS et ne demandent ni image, ni SVG, ni prise en charge de clip-path, donc la règle générée s'affiche de la même façon dans tout navigateur moderne, à n'importe quelle densité d'écran, sans une seule requête réseau.
Quelque chose est-il téléversé ou stocké ?
Non. L'aperçu est rendu localement à partir de valeurs de style validées, et comme l'indique le pied de page de l'espace de travail, aucune valeur générée n'entre dans le stockage, les journaux, les analytics ou le réseau.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer