Articolo originale: https://www.freecodecamp.org/news/css-shapes-explained-how-to-draw-a-circle-triangle-and-more-using-pure-css/
Sei nuovo allo sviluppo web e a CSS? Ti sei mai chiesta come quelle forme carine che ci sono sparse per l'internet sono fatte? Non chiedertelo più, sei nel posto giusto.
In questo articolo spiegherò le basi di creare le forme con CSS. C'è un sacco da dire su questo argomento, quindi non coprirò tutti (anzi, ben lontano da tutti) gli strumenti e le forme, ma ti dovrebbe dare una idea di base di come le forme sono create usando CSS.
Alcune forme richiedono più "aggiustamenti e trucchetti" di altre. Creare forme con CSS è in genere usare una combinazione delle proprietà width, height, top, right, left, border, bottom, transform e pseudo-elementi come :before e :after. Abbiamo anche proprietà JavaScript moderne per creare forme, come shape-outside e clip-path. Scriverò anche di loro in questo articolo.
Forme CSS- Il modo base
Usando alcuni trucchetti in CSS siamo sempre stati in grado di creare forme base come quadrati, cerchi e trangoli con le proprietà CSS regolari. Diamo un occhiata ad alcune di loro.
Quadrati e rettangoli
Quadrati e rettangoli sono probabilmente le forme più semplici da ottenere. Come default un elemento div è sempre un quadrato o un rettangolo.
Imposti l'altezza e la larghezza come mostrato nel codice sotto. Poi è solo questione di dare all'elemento un colore di sfondo. Puoi avere qualsiasi altra proprietà tu voglia sull'elemento.
#square {
background: lightblue;
width: 100px;
height: 100px;
}
Cerchi
È quasi altrettanto facile creare un cerchio. Per i cerchi possiamo usare la proprietà border-radius sull'elemento. Questo crea angoli curvi sull'elemento.
Se usiamo il valore di 50% crea un cerchio. Se usi altezza e larghezza diverse tra loro la forma sarà invece un ovale.
#circle {
background: lightblue;
border-radius: 50%;
width: 100px;
height: 100px;
}
Triangoli
I triangoli sono un pochino più difficili. Dobbiamo impostare i bordi di un elemento per dargli la forma di un triangolo. Se diamo all'elemento un'altezza e una larghezza di 0, la vera larghezza dell'elemento sarà la larghezza del bordo.
Tieni a mente che gli spigoli dei bordi di un elemento sono diagonali a 45° gradi tra loro. Questa è la ragione per cui questo metodo funziona per creare un triangolo. Impostando uno dei bordi ad un colore solido, e gli altri a trasparente avremo un triangolo.
#triangle {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid lightblue;
}
Se vuoi avere un triangolo/freccia che punta in una direzione diversa puoi cambiare i valori del bordo corrispondente a quale lato vuoi che sia divisibile. O se vuoi essere elegante, puoo usare la proprietà transform per ruotare l'elemento.
#triangle {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 80px solid lightblue;
border-bottom: 40px solid transparent;
}
Ok, questa era l'introduzione alle forme base in CSS. C'è probabilmente un numero infinito di forme che puoi pensare di creare. Questi sono solo i fondamentali, ma con un può di creatività e determinazione puoi ottenere un sacco solo con le propietà di base.
In alcuni casi, con forme più avanzate, è una buona idea usare anche gli pseudoelementi :after e :before:. Però questo è fuori dallo scopo di questo articolo visto che la mia intenzione è coprire le basi per farti iniziare.
Svantaggi
C'è un grosso svantaggio con l'approccio di sopra. Per esempio, se vuoi che il tuo testo sia esattamente attorno alla tua figura. Un regolare div con sfondo e bordi usati per creare la figura non lo permette, il testo non si adatta alla forma della figura, invece sarà attorno allo stesso div (che è un quadrato o un rettangolo).
Sotto una illustrazione che mostra il triangolo e come il testo si posiziona attorno ad esso.
Fortunatamente abbiamo invece alcune proprietà moderne di CSS da usare.
Forme CSS - L'altro modo
Oggigiorno abbiamo una proprietà chiamata shape-outside da usare in CSS. Questa proprietà ti fa definire una forma attorno a cui si posiziona il testo.
Assieme a questa proprietà abbiamo alcune forme base:
inset()
circle()
ellipse()
polygon()
Ecco un consiglio: Puoi anche usare la proprietà clip-path. Puoi creare le tue forme con quello nello stesso modo, ma non permetterà al testo di scorrere attorno alla forme come fa shape-outside.
L'elemento a cui dobbiamo applicare la proprietà shape-outside deve anche avere display: float. Deve anche avere una altezzae una larghezza definiti. Questo è molto importante da sapere!
Puoi leggere di più sul perché qui. Sotto c'è anche del testo che ho preso da quel link a developer.mozilla.org.
La proprietà shape-outside è specificata usando i valori dalla lista sotto, che deviniscono l'area float per gli elemento float. L'area float è determina la forma attorno a cui scorre il contenuto in linea (elementi float).inset()
Il tipo inset() può essere usato per creare un rettangolo/quadrato con un offset opzionale per il testo che ci scorre attorno. Ti permette di dare un valore di quanto vuoi che il tuo testo si sovrapponga alla figura.
Puoi specificare l'offset uguale per tutte le direzioni come inset(20px). Oppure puoi specificarlo per ogni direzione: inset(20px 5px 30px 10px).
Puoi usare anche altre unità per specificare l'offset, ad esempio, una percentuale. Il valori corrispondono alle direzioni in questo modo: inset(sopra destra sotto sinistra).
Guarda il codice di esempio sotto. Ho specificato i valori di inset come 20px sopra, 5px a destra, 30px sotto e 10px a sinistra. Se vuoi che il tuo testo stia attorno al quadrato invece puoi evitare di usare inset(). Invece dai un background al tuo div e specifica le dimensioni come al solito.
#square {
float: left;
width: 100px;
height: 100px;
shape-outside: inset(20px 5px 30px 10px);
background: lightblue;
}
È anche possibile dare a inset() un secondo valore che specifica il border-radius dell'inset, così:
#square {
float: left;
width: 100px;
height: 100px;
shape-outside: inset(20px 5px 30px 10px round 50px);
background: lightblue;
}
circle()
In questo caso un cerchio è creato usando la proprietà shape-outside. Devi anche usare clip-path con la stessa proprietà per far si che il cerchio appaia.
La proprietà clip-path può prendere gli stessi valori della proprietà shape-outside quindi possiamo dargli lo standard circle() che abbiamo dato a shape-outside. Nota che qui ho dato un margine di 20px all'elemento per dare un po' di spazio al testo.
#circle {
float: left;
width: 300px;
height: 300px;
margin: 20px;
shape-outside: circle();
clip-path: circle();
background: lightblue;
}
In questo esempio, non specifico il raggio del cerchio. Questo è perché voglio che sia grande quanto il div (300px). Se vuoi specificare una dimensione diversa per il cerchio puoi farlo.
Il cerchio prende due valori. Il primo valore è il raggio e il secondo valore è la posizione. Questi valori specificano il centro del cerchio.
Nell'esempio qua sotto ho messo un raggio del 50%. Quindi ho spostato il centro del cerchio del 30%. Nota che devi usare la parola "at" tra il raggio e la posizione.
Ho anche specificato un altro valore di posizione per clip-path. Questo taglia il cerchio a metà muovendo la posizione a zero.
#circle {
float: left;
width: 150px;
height: 150px;
margin: 20px;
shape-outside: circle(50% at 30%);
clip-path: circle(50% at 0%);
background: lightblue;
}
ellipse()
Le ellissi funzionano allo stesso modo dei cerchi eccetto che creano un ovale. Puoi definire sia la posizione X che la posizione Y, in questo modo: ellipse(25px, 50px).
Allo stesso modo dei cerchi, prendono anche un valore per la posizione come ultimo valore.
#ellipse {
float: left;
width: 150px;
height: 150px;
margin: 20px;
shape-outside: ellipse(20% 50%);
clip-path: ellipse(20% 50%);
background: lightblue;
}
polygon()
Un poligono è una figura con diversi vertici/coordinate definiti. Sotto ho creato una forma a "T", che è la prima lettera del mio nome. Inizio dalle coordinate 0,0 e muovo da sinistra a destra per creare la forma a "T".
#polygon {
float: left;
width: 150px;
height: 150px;
margin: 0 20px;
shape-outside: polygon(
0 0,
100% 0,
100% 20%,
60% 20%,
60% 100%,
40% 100%,
40% 20%,
0 20%
);
clip-path: polygon(
0 0,
100% 0,
100% 20%,
60% 20%,
60% 100%,
40% 100%,
40% 20%,
0 20%
);
background: lightblue;
}
Immagini
Puoi anche usare immagini con un background trasparente per creare le tue figure. Come questa bellissima luna tonda qua sotto.
Questa è una immagine .png con un background trasparente.
<img src="src/moon.png" id="moon" />#moon {
float: left;
width: 150px;
height: 150px;
shape-outside: url("./src/moon.png");
}
E questo è tutto! Grazie per aver letto.
Sull'autore dell'articolo
Il mio nome è Thomas Weibenfalk e sono uno sviluppatore dalla Svezia. Creo regolarmente tutorial gratuiti sul mio canale YouTube. Ci sono anche alcuni corsi premium là fuori su React e Gatsby. Vieni a trovarmi a questi link:
Twitter — @weibenfalk,
Weibenfalk on Youtube,
Weibenfalk Courses Website.