En CSS, las líneas son en su mayoría horizontales o verticales. Sin embargo, con las propiedades de CSS, puede cambiar la posición de las líneas. En el contexto de CSS, una línea diagonal es solo una rotación de una línea horizontal en un ángulo de 45 grados o -45 grados. Esto es posible con la ayuda del CSS "transformar" propiedad.

Esta guía mostrará cómo usar el CSS "transformar"Propiedad para dibujar una línea diagonal.

Cómo dibujar diagonal en CSS?

Para dibujar una diagonal en CSS, el "transformarSe utiliza la propiedad. Primero, discutiremos el "transformar"Propiedad para que pueda entenderlo de una mejor manera.

¿Cuál es la propiedad de "transformar" en CSS??

En CSS, el "transformarLa propiedad se utiliza para la transformación 2D y 3D de los elementos HTML. Usando esta propiedad, un elemento se puede girar, moverse, sesgar y escalar. Más específicamente, puede utilizar la propiedad de transformación para dibujar una línea diagonal usando CSS.

Sintaxis

La sintaxis de la propiedad de transformación es:

Transformar: ninguno | transformación-funciones

La descripción de los valores anteriores se da a continuación:

• ninguno: Se usa para restringir la transformación de un elemento.
• transformación-funciones: Se usa para invocar varias funciones, como rotar, rotar (), escala (), mover () y skew ().

Veamos algunos ejemplos prácticos relacionados con el dibujo de una línea diagonal a 45 y -45 grados.

Ejemplo 1: dibuja una línea diagonal a 45 grados usando CSS

Primero, cree un DIV vacío en la sección HTML para agregar una línea diagonal. En nuestro caso, hemos agregado un encabezado

y un .

Html

Línea diagonal

Ahora, muévase a la sección CSS para agregar una línea diagonal.

En CSS, hemos usado "div"Para acceder al contenedor creado en el HTML. A continuación, aplique el "borde"Propiedad y establece los valores del borde como"3px","sólido", y "RGB (255, 0, 0)", Respectivamente. Entonces, usa el "ancho"Propiedad en el siguiente paso y establecer los valores como"40%". Además, asigne el valor de la propiedad de transformación como "Rotar (45 grados)"Y la propiedad de origen transformado como"izquierda"Para dibujar la línea diagonal que comienza desde el lado izquierdo.

CSS

div
Border-Bottom: 3px RGB sólido (255, 0, 0);
Ancho: 45%;
transformar: girar (45deg);
transformación de origen: izquierda;

Nota: Aquí el "transformaciónLa propiedad se utiliza para establecer la posición de la diagonal a lo largo del eje X y el eje Y.

Como resultado del código de mención anterior, verá la siguiente salida:

Ejemplo 2: dibuja una línea diagonal a -45 grados usando CSS

En este ejemplo, dibujaremos una línea diagonal usando un "-45 grados" ángulo. Para este propósito, muévase a la sección CSS y cambie el valor de la propiedad de transformación y la propiedad de origen de transformación.

Aquí, estableceremos el valor de la propiedad de transformación como "-45 grados"Y transformar el origen como"bien".

CSS

div
Border-Bottom: 3px RGB sólido (0, 47, 255);
Ancho: 45%;
transformación: girar (-45deg);
transformación de origen: correcto;

Guarde el código, vaya al archivo HTML y ejecútelo para ver el siguiente resultado:

La imagen dada anterior indica que la propiedad de transformación se implementa correctamente. Quiero dibujar una línea dentro de una caja? Mira el siguiente ejemplo!

Ejemplo: dibuja una línea diagonal dentro de la caja con CSS

Para dibujar una diagonal dentro de la caja, cree una caja y luego dibuje una diagonal dentro de él. Para hacerlo, agregaremos un encabezado y crearemos un nombre de clase Div "caja"Y luego crea otro divs dentro de su nombre de clase"línea".

Html

Línea diagonal

Ahora, muévase al CSS para dibujar una diagonal dentro del cuadro, especifique los valores de propiedades de ancho y altura como "300px". Después de eso, agregue un borde alrededor del Div usando la propiedad fronteriza y establezca sus valores como "5px","sólido", y "RGB (202, 33, 75)".

CSS

.caja
Ancho: 300px;
Altura: 300px;
borde: 5px RGB sólido (202, 33, 75);

Esto mostrará el siguiente resultado:

A continuación, muévase al segundo div e invoque el "calc ()Función para calcular la longitud de la diagonal según el tamaño de la caja cuadrada. Para esto, use la fórmula de diagonal dentro del cuadrado "lado*√2", Donde el valor de √2 es"1.41", Y el lado de la plaza es"300px".

Además, establezca el valor de la propiedad de fondo fronterizo como "3px","sólido", y "RGB (1, 68, 12)", Respectivamente. Por último, asigne el valor de la propiedad de transformación como "Rotar (45 grados)"Y la propiedad de origen transformado como"izquierda"Para dibujar la línea diagonal.

CSS

.línea
Ancho: Calc (300px*1.41);
Border-Bottom: 3px RGB sólido (1, 68, 12);
transformar: girar (45deg);
transformación de origen: izquierda;

Producción

Hemos compilado los métodos más fáciles para dibujar una línea diagonal usando CSS.

Conclusión

Para dibujar la línea diagonal, la "transformarSe utiliza la propiedad de CSS, que cambia la posición de los cambios diagonales de acuerdo con el valor dado del grado ",", ","45 grados" o "-45 grados". Usando esto, puede establecer los diferentes ángulos de la línea de acuerdo con su elección. En este artículo, hemos explicado el método para dibujar una línea diagonal utilizando la propiedad de transformación con la ayuda de ejemplos.