Come creare forme di base e avanzate con puro CSS

Hai mai visto un sito Web CSS puro in cui ogni elemento è finito tramite CSS? I CSS non si limitano a definire gli elementi. Le forme CSS consentono ai web designer di creare percorsi personalizzati come triangoli, cerchi, poligoni e altro. In questo modo, non sei più costretto a inserire un'immagine fluttuante con uno sfondo trasparente, solo per essere deluso da una scatola rettangolare attorno ad essa.

In questo articolo, useremo forme CSS e alcuni valori funzionali per codificare forme diverse.

Disegnare forme CSS di base

Iniziamo con le forme di base come quadrato, rettangolo, triangolo, cerchio ed ellisse.

Quadrato e Rettangolo

Quadrato e rettangolo sono le forme più facili da realizzare in CSS. Tutto quello che devi fare è creare un e dagli un altezza e un larghezza.

HTML

CSS

.rec-sq {
display: flessibile;
distanza: 2 em;
margine: 2 em;
}
.quadrato {
larghezza: 15 rem;
altezza: 15rem;
sfondo: rgb (255, 123, 0);
}
.rettangolo {
larghezza: 24 rem;
altezza: 14rem;
sfondo: rgb (0, 119, 128);
}

Produzione:

Cerchio ed Ellisse

Devi solo assegnare un raggio di confine del 50% a un quadrato e otterrai un cerchio. Fai lo stesso con il rettangolo per ottenere un'ellisse.

HTML

CSS

.cerchio {
larghezza: 15 rem;
altezza: 15rem;
sfondo: rgb (255, 123, 0);
raggio di confine: 50%;
}
.ellisse {
larghezza: 24 rem;
altezza: 14rem;
sfondo: rgb (0, 119, 128);
raggio di confine: 50%;
}

Produzione:

triangoli

Useremo i bordi per creare triangoli. Ti stai chiedendo come funziona? Tutto quello che devi fare è impostare il larghezza e altezza del triangolo a zero. Significa, andando avanti, il larghezza effettiva dell'elemento sarà il larghezza del bordo. Inoltre, potresti già sapere che i bordi del bordo sono diagonali di 45 gradi l'uno rispetto all'altro. Assegna colori diversi a ciascun bordo e impostane tre su trasparenti. Alla fine, avrai il tuo triangolo.

HTML

CSS

//comune a tutti
corpo {
display: flessibile;
distanza: 5 em;
margine: 15 em;
}.campione {
altezza: 8,5 cm;
larghezza: 8,5 cm;
bordo superiore: 1em solido #9ee780;
bordo destro: 1em rgb solido (240, 241, 141);
bordo inferiore: 1em rgb solido (145, 236, 252);
bordo sinistro: 1em rgb solido (248, 115, 106);
}.triangolo {
altezza: 0;
larghezza: 0;
bordo superiore: 5em solido #9ee780;
bordo destro: 5em rgb solido (240, 241, 141);
bordo inferiore: 5em rgb solido (145, 236, 252);
bordo sinistro: 5em rgb solido (248, 115, 106);
}

Produzione:

Puoi giocare con altezza e colore del bordo per ottenere diversi tipi di triangoli. Ad esempio, puoi creare un triangolo che punta verso l'alto dando il bordo-fondo un colore solido mentre tutti gli altri bordi sono impostati su trasparente. Inoltre, puoi creare un triangolo che punta nella direzione giusta o un triangolo rettangolo giocando con larghezza del bordo e colore del bordo.

HTML

CSS

.triangolo {
altezza: 0;
larghezza: 0;
bordo-top: 5em solido trasparente;
bordo destro: 5em solido trasparente;
bordo inferiore: 5em rgb solido (145, 236, 252);
bordo sinistro: 5em solido trasparente;
}
.triangolo destro {
larghezza: 0;
altezza: 0;
stile bordo: solido;
larghezza del bordo: 4em 0 4em 8em;
colore bordo: trasparente trasparente rgb (245, 149, 221);
}
.triangolo-basso-destra {
larghezza: 0;
altezza: 0;
stile bordo: solido;
larghezza del bordo: 8em 0 0 8em;
colore bordo: trasparente trasparente rgb (151, 235, 158);
}

Produzione:

Creazione di forme avanzate usando i CSS

Puoi usare ::prima e ::dopopseudo-elementi per creare forme avanzate. Con l'uso intelligente delle proprietà di posizione e trasformazione, puoi facilmente creare forme complesse utilizzando il puro CSS.

Forma a stella (5 punti)

Dovrai manipolare i bordi usando il valore di rotazione della trasformazione. L'idea è di creare due lati usando a classe = "stella", gli altri due lati usando il ::dopo elemento e l'ultimo lato usando il ::prima elemento.

HTML

CSS

.stella-cinque {
margine: 3.125em 0;
posizione: relativa;
blocco di visualizzazione;
larghezza: 0 em;
altezza: 0 em;
bordo destro: 6,25 em trasparente solido;
bordo inferiore: 4.3em rgb solido (255, 174, 81);
bordo sinistro: 6,25 em trasparente solido;
trasformare: ruotare (35deg);
}
.star-cinque: prima di {
bordo-fondo: 5em rgb solido (255, 174, 81);
bordo sinistro: 2em solido trasparente;
bordo destro: 1.875 em trasparente solido;
posizione: assoluta;
altezza: 0;
larghezza: 0;
in alto: -45px;
sinistra: -65px;
blocco di visualizzazione;
contenuto: '';
trasformare: ruotare (-35 gradi);
}
.star-cinque: dopo {
posizione: assoluta;
blocco di visualizzazione;
in alto: 3px;
sinistra: -105px;
larghezza: 0;
altezza: 0;
bordo destro: 6,25 em trasparente solido;
bordo inferiore: 4.3em rgb solido (255, 174, 81);
bordo sinistro: 5.95em solido trasparente;
trasformare: ruotare (-70deg);
contenuto: '';
}

Produzione:

Pentagono

Puoi creare un pentagono combinando un trapezio e un triangolo. Utilizzo frontiera e proprietà di posizione modellarli e raggrupparli.

HTML

CSS

.pentagono {
posizione: relativa;
larghezza: 10 em;
box-size: content-box;
larghezza bordo: 10em 5em 0;
stile bordo: solido;
colore del bordo: rgb (7, 185, 255) trasparente;
margine superiore: 20rem;
margine sinistro: 10rem;
}
.pentagono: prima di {
contenuto: "";
posizione: assoluta;
altezza: 0;
larghezza: 0;
in alto: -18em;
sinistra: -5em;
larghezza del bordo: 0 10em 8em;
stile bordo: solido;
colore del bordo: rgb trasparente trasparente (7, 185, 255);
}

Produzione:

Diamante

Raggruppa due triangoli che puntano verso l'alto e verso il basso usando la posizione per creare una forma a diamante. Sì, useremo il frontiera proprietà per creare questi triangoli.

HTML

CSS

.diamante {
larghezza: 0;
altezza: 0;
posizione: relativa;
in alto: -3em;
bordo: 3em solido trasparente;
colore bordo-fondo: rgb (129, 230, 255);
}
.diamante: dopo {
contenuto: '';
larghezza: 0;
altezza: 0;
posizione: assoluta;
sinistra: -3em;
cima: 3em;
bordo: 3em solido trasparente;
border-top-color: rgb (129, 230, 255);
}

Produzione:

Puoi creare una forma a scudo di diamante modificando l'altezza del triangolo superiore come mostrato di seguito:

HTML

CSS

.diamante-scudo
{
larghezza: 0;
altezza: 0;
bordo: 3em solido trasparente;
bordo inferiore: 1,25 em rgb solido (71, 194, 231);
posizione: relativa;
in alto: -3em;
}
.diamante: dopo {
contenuto: '';
posizione: assoluta;
sinistra: -3em;
in alto: 1,25 em;
larghezza: 0;
altezza: 0;
bordo: 3em solido trasparente;
bordo superiore: 4.4em rgb solido (71, 194, 231);
}

Produzione:

Cuore

La forma a cuore è un po' difficile ma puoi farcela usando ::prima e ::dopo pseudo-elementi. Puoi usare diversi valori di trasformare per ruotarli da diverse angolazioni fino a formare perfettamente una forma a cuore. Alla fine, puoi impostare trasformare-origine per impostare il punto attorno al quale viene applicata la trasformazione.

HTML

CSS

.cuore {
larghezza: 6,25 cm;
altezza: 55m;
posizione: relativa;
}
.cuore: prima,
.heart: dopo {
contenuto: "";
larghezza: 3 em;
altezza: 5m;
posizione: assoluta;
sinistra: 3em;
in alto: 0;
fondo: rosso;
raggio di confine: 3em 3em 0 0;
trasformare: ruotare (-45 gradi);
origine della trasformazione: 0 100%;
}
.heart: dopo {
sinistra: 0;
trasformare: ruotare (45 gradi);
origine della trasformazione: 100% 100%;
}

Produzione:

Esperimento con forme CSS pure

Ora dovresti avere familiarità con diverse immagini CSS pure che possono essere costruite scrivendo poche righe di codice. Costruire un sito Web super veloce non è più un compito frenetico poiché sai come giocare con il codice. La parte migliore è che puoi risuonare con la voce del marchio manipolando forme e colori diversi in base alle tue esigenze. Pertanto, continua a sperimentare e scopri nuovi modi per disegnare forme fantastiche esclusivamente con i CSS.

Come costruire una barra di navigazione reattiva usando HTML e CSS

Chiamare tutti gli sviluppatori web principianti: questo tutorial ti fornirà le competenze necessarie per creare le tue barre di navigazione respsonive usando solo HTML e CSS!

Leggi Avanti

Circa l'autore