In CSS, le linee sono per lo più orizzontali o verticali. Tuttavia, usando le proprietà CSS, è possibile modificare la posizione delle linee. Nel contesto di CSS, una linea diagonale è solo una rotazione di una linea orizzontale ad un angolo di 45 gradi o -45 gradi. Ciò è possibile con l'aiuto del CSS "trasformare" proprietà.

Questa guida mostrerà come usare il CSS "trasformare"Proprietà per disegnare una linea diagonale.

Come disegnare diagonale in CSS?

Per disegnare una diagonale in CSS, il "trasformare"La proprietà viene utilizzata. Innanzitutto, discuteremo del "trasformare"Proprietà in modo da poterlo capire in modo migliore.

Qual è la proprietà "trasforma" in CSS?

In CSS, il “trasformare"La proprietà viene utilizzata per la trasformazione 2D e 3D di elementi HTML. Usando questa proprietà, un elemento può essere ruotato, spostato, distorto e ridimensionato. Più specificamente, è possibile utilizzare la proprietà di trasformazione per disegnare una linea diagonale usando CSS.

Sintassi

La sintassi della proprietà Transform è:

Trasformazione: nessuna | Funzioni di trasformazione

Di seguito è riportata la descrizione dei valori di cui sopra:

• nessuno: È usato per limitare la trasformazione di un elemento.
• Funzioni di trasformazione: Viene utilizzato per invocare varie funzioni come rota, rota (), scala (), mossa () e inclinazione ().

Dai un'occhiata ad alcuni esempi pratici relativi al disegno di una linea diagonale a 45 e -45 gradi.

Esempio 1: disegnare una linea diagonale a 45 gradi usando CSS

Innanzitutto, crea un div vuoto nella sezione HTML per aggiungere una linea diagonale. Nel nostro caso, abbiamo aggiunto un'intestazione

e a .

Html

Linea diagonale

Ora, spostati nella sezione CSS per aggiungere una linea diagonale.

In CSS abbiamo usato "div"Per accedere al contenitore creato nell'HTML. Successivamente, applica il “Border-Bottom"Proprietà ad essa e imposta i valori del bordo come"3px","solido", E "RGB (255, 0, 0)"Rispettivamente. Quindi, usa il "larghezza"Proprietà nel passaggio successivo e impostare i valori come"40%". Inoltre, assegnare il valore della proprietà di trasformazione come "Ruota (45DEG)"E la proprietà Transform-Origin come"Sinistra"Per disegnare la linea diagonale a partire dal lato sinistro.

CSS

div
Border-Bottom: 3px Solid RGB (255, 0, 0);
larghezza: 45%;
trasformazione: rotare (45DEG);
Transform-Origin: a sinistra;

Nota: Qui, il "Transform-origin"La proprietà viene utilizzata per impostare la posizione della diagonale lungo l'asse X e l'asse Y.

Come risultato del codice di menzione di cui sopra, vedrai il seguente output:

Esempio 2: disegnare una linea diagonale a -45 gradi usando CSS

In questo esempio, disegneremo una linea diagonale usando un "-45Deg"Angolo. A tale scopo, passare alla sezione CSS e modificare il valore della proprietà trasformata e la proprietà di trasformazione.

Qui, imposteremo il valore della proprietà Transform come "-45Deg"E trasformare origine come"Giusto".

CSS

div
Border-Bottom: 3px Solid RGB (0, 47, 255);
larghezza: 45%;
trasformazione: rotare (-45deg);
Transform-Origin: giusto;

Salva il codice, vai al file HTML ed eseguilo per vedere il seguente risultato:

L'immagine sopra data indica che la proprietà di trasformazione viene implementata correttamente. Voglio disegnare una linea all'interno di una scatola? Dai un'occhiata al prossimo esempio!

Esempio: disegnare una linea diagonale all'interno della scatola usando CSS

Per disegnare una diagonale all'interno della scatola, creare una scatola e quindi disegnare un diagonale al suo interno. Per fare ciò, aggiungeremo un'intestazione e creeremo un nome di classe Div "scatola"E poi crea un altro div all'interno del suo nome di classe"linea".

Html

Linea diagonale

Ora, spostati sul CSS per disegnare una diagonale all'interno della casella, specificare i valori delle proprietà di larghezza e altezza come "300px". Successivamente, aggiungi un bordo attorno al div usando la proprietà del bordo e imposta i suoi valori come "5px","solido", E "RGB (202, 33, 75)".

CSS

.scatola
larghezza: 300px;
Altezza: 300px;
Bordo: 5px Solid RGB (202, 33, 75);

Questo mostrerà il seguente risultato:

Successivamente, spostati al secondo div e invoca il "Calc ()"Funzione per calcolare la lunghezza della diagonale in base alla dimensione della scatola quadrata. Per questo, usa la formula della diagonale all'interno del quadrato "lato*√2", Dove il valore di √2 è"1.41", E il lato della piazza è"300px".

Inoltre, imposta il valore della proprietà del fondo di confine come "3px","solido", E "RGB (1, 68, 12)"Rispettivamente. Infine, assegnare il valore della proprietà Transform come "Ruota (45DEG)"E la proprietà Transform-Origin come"Sinistra"Per disegnare la linea diagonale.

CSS

.linea
larghezza: calc (300px*1.41);
Border-Bottom: 3px Solid RGB (1, 68, 12);
trasformazione: rotare (45DEG);
Transform-Origin: a sinistra;

Produzione

Abbiamo compilato i metodi più semplici per disegnare una linea diagonale usando CSS.

Conclusione

Per disegnare la linea diagonale, la "trasformareViene utilizzato la proprietà di CSS, che cambia la posizione delle variazioni diagonali in base al valore dato del grado, "45Deg" O "-45Deg". Usando questo, puoi impostare i diversi angoli della linea in base alla tua scelta. In questo articolo, abbiamo spiegato il metodo per tracciare una linea diagonale usando la proprietà Transform con l'aiuto di esempi.