Parcours de la tâche / de l'entrée au résultat
Comment créer un triangle CSS
- 01
Choisissez la direction
En haut à droite / En bas à droite / En bas à gauche / En haut à gauche · 8
- 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.
- 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é.
- 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é.
- 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.
- 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. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.