Dans CSS, les lignes sont principalement horizontales ou verticales. Cependant, en utilisant les propriétés CSS, vous pouvez modifier la position des lignes. Dans le contexte du CSS, une ligne diagonale n'est qu'une rotation d'une ligne horizontale à un angle de 45 degrés ou -45 degrés. Cela est possible avec l'aide du CSS "transformer" propriété.

Ce guide montrera comment utiliser le CSS "transformer»Propriété pour tracer une ligne diagonale.

Comment dessiner la diagonale dans CSS?

Pour dessiner une diagonale en CSS, le «transformer»La propriété est utilisée. Tout d'abord, nous discuterons du «transformer«Propriété afin que vous puissiez le comprendre d'une meilleure manière.

Quelle est la propriété «Transformer» dans CSS?

Dans CSS, le «transformer»La propriété est utilisée pour la transformation 2D et 3D des éléments HTML. En utilisant cette propriété, un élément peut être tourné, déplacé, biaisé et mis à l'échelle. Plus précisément, vous pouvez utiliser la propriété de transformation pour tracer une ligne diagonale à l'aide de CSS.

Syntaxe

La syntaxe de la propriété Transform est:

transformée: Aucune | Transform-fonctions

Description des valeurs ci-dessus est donnée ci-dessous:

• aucun: Il est utilisé pour restreindre la transformation d'un élément.
• Transform-fonctions: Il est utilisé pour invoquer diverses fonctions telles que rotation, rotation (), échelle (), move () et skew ().

Voyons quelques exemples pratiques liés au dessin d'une ligne diagonale à 45 et -45 degrés.

Exemple 1: tracez une ligne diagonale à 45 degrés en utilisant CSS

Tout d'abord, créez une div vide dans la section HTML pour ajouter une ligne diagonale. Dans notre cas, nous avons ajouté une rubrique

et un .

Html

Ligne diagonale

Maintenant, passez à la section CSS pour ajouter une ligne diagonale.

Dans CSS, nous avons utilisé «div«Pour accéder au conteneur créé dans le HTML. Ensuite, appliquez le «Bordure du bas«Propriété à lui et définissez les valeurs de la frontière comme«3px","solide", et "RVB (255, 0, 0)", respectivement. Ensuite, utilisez le "largeur»Propriété à l'étape suivante et définissez les valeurs comme«40%". De plus, attribuez la valeur de la propriété de transformation comme «Rotation (45deg)»Et la propriété d'origine transformateur comme«gauche«Pour dessiner la ligne diagonale à partir du côté gauche.

CSS

div
Border-Bottom: 3px RVB solide (255, 0, 0);
Largeur: 45%;
transformée: rotation (45deg);
Transform-Origin: à gauche;

Note: Ici le "originaire”La propriété est utilisée pour définir la position de la diagonale le long de l'axe X et de l'axe Y.

À la suite du code de mention ci-dessus, vous verrez la sortie suivante:

Exemple 2: tracez une ligne diagonale à -45 degrés en utilisant CSS

Dans cet exemple, nous tracerons une ligne diagonale en utilisant un «-45deg" angle. À cette fin, passez à la section CSS et modifiez la valeur de la propriété de transformation et de la propriété d'origine transform.

Ici, nous définirons la valeur de la propriété Transform comme «-45deg"Et l'origine transformée comme"droite".

CSS

div
Border-Bottom: 3px RVB solide (0, 47, 255);
Largeur: 45%;
transformée: rotation (-45deg);
Transform-Origin: à droite;

Enregistrez le code, accédez au fichier HTML et exécutez-le pour voir le résultat suivant:

L'image donnée ci-dessus indique que la propriété de transformation est mise en œuvre avec succès. Veux tracer une ligne à l'intérieur d'une boîte? Découvrez l'exemple suivant!

Exemple: tracez une ligne diagonale à l'intérieur de la boîte en utilisant CSS

Pour dessiner une diagonale à l'intérieur de la boîte, créez une boîte, puis dessinez une diagonale à l'intérieur. Pour ce faire, nous ajouterons un titre et créerons un nom de classe div "boîte"Puis créez une autre div à l'intérieur de son nom de classe"doubler".

Html

Ligne diagonale

Maintenant, déplacez-vous vers le CSS pour dessiner une diagonale à l'intérieur de la case, spécifiez les valeurs de largeur et de hauteur comme «300px". Après cela, ajoutez une bordure autour de la div à l'aide de la propriété de la frontière et définissez ses valeurs comme «5px","solide", et "RVB (202, 33, 75)".

CSS

.boîte
Largeur: 300px;
hauteur: 300px;
Border: 5px RVB solide (202, 33, 75);

Cela montrera le résultat suivant:

Ensuite, passez à la deuxième div et invoquez le «calc ()”Fonction pour calculer la longueur de la diagonale en fonction de la taille de la boîte carrée. Pour cela, utilisez la formule de diagonale à l'intérieur du carré "côté * √2», Où la valeur de √2 est«1.41», Et le côté du carré est«300px".

En outre, définissez la valeur de la propriété frontalière comme «3px","solide", et "RVB (1, 68, 12)", respectivement. Enfin, attribuez la valeur de la propriété de transformation comme «Rotation (45deg)»Et la propriété d'origine transformateur comme«gauche”Pour tracer la ligne diagonale.

CSS

.doubler
Largeur: calc (300px * 1.41);
Border-Bottom: 3px RVB solide (1, 68, 12);
transformée: rotation (45deg);
Transform-Origin: à gauche;

Sortir

Nous avons compilé les méthodes les plus faciles pour tracer une ligne diagonale en utilisant CSS.

Conclusion

Pour tracer la ligne diagonale, le «transformer«La propriété de CSS est utilisée, ce qui modifie la position des changements diagonaux en fonction de la valeur donnée du degré,«45deg" ou "-45deg". En utilisant cela, vous pouvez définir les différents angles de la ligne en fonction de votre choix. Dans cet article, nous avons expliqué la méthode pour tracer une ligne diagonale en utilisant la propriété Transform à l'aide d'exemples.