Cum să faci forme de bază și avansate cu CSS pur

Ați văzut vreodată un site web CSS pur în care fiecare element este finalizat prin CSS? CSS face mai mult decât elemente de stil. Formele CSS permit designerilor web să creeze căi personalizate, cum ar fi un triunghi, cercuri, poligoane și multe altele. În acest fel, nu mai sunteți constrâns să introduceți o imagine plutitoare cu un fundal transparent, doar pentru a fi dezamăgit de o casetă dreptunghiulară în jurul acesteia.

În acest articol, vom folosi forme CSS și câteva valori funcționale pentru a codifica diferite forme.

Desenarea formelor CSS de bază

Să începem cu formele de bază precum pătrat, dreptunghi, triunghi, cerc și elipsă.

Pătrat și dreptunghi

Pătratul și dreptunghiul sunt cele mai ușor de realizat în CSS. Tot ce trebuie să faci este să creezi un si da-i a înălţime si a lăţime.

HTML

CSS

.rec-sq {
display: flex;
decalaj: 2em;
marja: 2em;
}
.pătrat {
latime: 15rem;
inaltime: 15rem;
fundal: rgb (255, 123, 0);
}
.dreptunghi {
latime: 24rem;
inaltime: 14rem;
fundal: rgb (0, 119, 128);
}

Ieșire:

Cercul și elipsa

Trebuie doar să atribuiți un hotar-raza de 50% la un pătrat și veți obține un cerc. Faceți același lucru cu dreptunghiul pentru a obține o elipsă.

HTML

CSS

.cerc {
latime: 15rem;
inaltime: 15rem;
fundal: rgb (255, 123, 0);
raza-limită: 50%;
}
.elipse {
latime: 24rem;
inaltime: 14rem;
fundal: rgb (0, 119, 128);
raza-limită: 50%;
}

Ieșire:

Triunghiuri

Vom folosi margini pentru a crea triunghiuri. Vă întrebați cum funcționează? Tot ce trebuie să faceți este să setați lăţime și înălţime a triunghiului la zero. Înseamnă, mergând înainte, latimea reala a elementului va fi lățimea graniței. De asemenea, poate știți deja că marginile marginilor sunt diagonale de 45 de grade unele față de altele. Dați culori diferite fiecărui chenar și setați oricare trei dintre ele la transparent. În cele din urmă, vei avea triunghiul tău.

HTML

CSS

//comun tuturor
corp {
display: flex;
decalaj: 5em;
marja: 15em;
}.probă {
inaltime: 8.5em;
latime: 8.5em;
chenar-sus: 1em solid #9ee780;
chenar-dreapta: 1em rgb solid (240, 241, 141);
chenar-inferioară: 1em rgb solid (145, 236, 252);
chenar-stânga: 1em rgb solid (248, 115, 106);
}.triunghi {
inaltime: 0;
latime: 0;
chenar-sus: 5em solid #9ee780;
chenar-dreapta: 5em rgb solid (240, 241, 141);
chenar-inferioară: 5em rgb solid (145, 236, 252);
chenar-stânga: 5em rgb solid (248, 115, 106);
}

Ieșire:

Te poți juca cu înălţime și chenar-culoare pentru a obține diferite tipuri de triunghiuri. De exemplu, puteți crea un triunghi îndreptat spre direcția în sus dând marginea-de jos o culoare solidă, în timp ce toate celelalte margini sunt setate la transparente. De asemenea, puteți crea un triunghi îndreptat spre direcția corectă sau un triunghi în unghi drept jucându-vă lățimea graniței și chenar-culoare.

HTML

CSS

.triunghi sus {
inaltime: 0;
latime: 0;
border-top: 5em solid transparent;
chenar-dreapta: 5em solid transparent;
chenar-inferioară: 5em rgb solid (145, 236, 252);
chenar-stânga: 5em solid transparent;
}
.triunghi-dreapta {
latime: 0;
inaltime: 0;
chenar-stil: solid;
lățime chenar: 4em 0 4em 8em;
border-color: transparent transparent transparent rgb (245, 149, 221);
}
.triunghi-jos-dreapta {
latime: 0;
inaltime: 0;
chenar-stil: solid;
lățime chenar: 8em 0 0 8em;
border-color: transparent transparent transparent rgb (151, 235, 158);
}

Ieșire:

Crearea formelor avansate folosind CSS

Poți să folosești ::inainte de și ::dupăpseudo-elemente pentru a crea forme avansate. Cu utilizarea inteligentă a proprietăților de poziție și transformare, puteți construi cu ușurință forme complexe folosind CSS pur.

Forma stea (5 puncte)

Va trebui să manipulați marginile folosind valoarea de rotație a transformării. Ideea este de a crea două fețe folosind a clasa=”stea”, celelalte două părți folosind ::după element, iar ultima latură utilizând ::inainte de element.

HTML

CSS

.stea-cinci {
marja: 3.125em 0;
poziție: relativă;
afisare: bloc;
latime: 0em;
inaltime: 0em;
chenar-dreapta: 6.25em solid transparent;
margine de jos: 4,3 em rgb solid (255, 174, 81);
chenar-stânga: 6.25em solid transparent;
transformare: rotire (35deg);
}
.stea-cinci: înainte de {
chenar-inferioară: 5em rgb solid (255, 174, 81);
chenar-stânga: 2em solid transparent;
chenar-dreapta: 1.875em solid transparent;
poziție: absolută;
inaltime: 0;
latime: 0;
sus: -45px;
stânga: -65px;
afisare: bloc;
continut: '';
transformare: rotire(-35deg);
}
.stea-cinci: după {
poziție: absolută;
afisare: bloc;
sus: 3px;
stânga: -105px;
latime: 0;
inaltime: 0;
chenar-dreapta: 6.25em solid transparent;
margine de jos: 4,3 em rgb solid (255, 174, 81);
chenar-stânga: 5.95em solid transparent;
transformare: rotire(-70deg);
continut: '';
}

Ieșire:

Pentagon

Puteți crea un pentagon combinând un trapez și un triunghi. Utilizare frontieră și proprietăți de poziție modelează-le și grupează-le.

HTML

CSS

.pentagon {
poziție: relativă;
latime: 10em;
box-sizing: content-box;
lățime chenar: 10em 5em 0;
chenar-stil: solid;
culoare-chenar: rgb (7, 185, 255) transparent;
margine-top: 20rem;
margine-stânga: 10rem;
}
.pentagon: înainte de {
continut: "";
poziție: absolută;
inaltime: 0;
latime: 0;
sus: -18em;
stânga: -5em;
lățime chenar: 0 10em 8em;
chenar-stil: solid;
culoare-chenar: rgb transparent transparent (7, 185, 255);
}

Ieșire:

Diamant

Grupați două triunghiuri îndreptate în sus și în jos folosind poziția pentru a crea o formă de diamant. Da, vom folosi frontieră proprietăți pentru a crea aceste triunghiuri.

HTML

CSS

.diamond {
latime: 0;
inaltime: 0;
poziție: relativă;
sus: -3em;
bordura: 3em solid transparent;
culoare-inferioară-chenar: rgb (129, 230, 255);
}
.diamond: după {
continut: '';
latime: 0;
inaltime: 0;
poziție: absolută;
stânga: -3em;
sus: 3em;
bordura: 3em solid transparent;
culoarea-chenar: rgb (129, 230, 255);
}

Ieșire:

Puteți crea o formă de scut de diamant modificând înălțimea triunghiului superior, așa cum se arată mai jos:

HTML

CSS

.diamant-scut
{
latime: 0;
inaltime: 0;
bordura: 3em solid transparent;
margine de jos: 1,25 em rgb solid (71, 194, 231);
poziție: relativă;
sus: -3em;
}
.tăiat diamant: după {
continut: '';
poziție: absolută;
stânga: -3em;
sus: 1.25em;
latime: 0;
inaltime: 0;
bordura: 3em solid transparent;
border-top: 4,4em rgb solid (71, 194, 231);
}

Ieșire:

inima

Forma inimii este puțin grea, dar o puteți face folosind ::inainte de și ::după pseudo-elemente. Puteți folosi diferite valori ale transforma pentru a le roti din diferite unghiuri până când formează perfect o formă de inimă. În cele din urmă, puteți seta transformare-origine pentru a stabili punctul în jurul căruia se aplică transformarea.

HTML

CSS

.inima {
latime: 6.25em;
inaltime: 55em;
poziție: relativă;
}
.inima: inainte,
.inima: dupa {
continut: "";
latime: 3em;
inaltime: 5em;
poziție: absolută;
stânga: 3em;
sus: 0;
fundal: roșu;
hotar-raza: 3em 3em 0 0;
transformare: rotire(-45deg);
transformare-origine: 0 100%;
}
.inima: dupa {
stânga: 0;
transformare: rotire (45deg);
transformare-origine: 100% 100%;
}

Ieșire:

Experimentați cu forme CSS pure

Acum ar trebui să fiți familiarizați cu diferite imagini CSS pure care pot fi construite prin scrierea câtorva linii de cod. Construirea unui site web super-rapid nu mai este o sarcină agitată, deoarece știi cum să te joci cu codul. Cea mai bună parte este că puteți rezona cu vocea mărcii manipulând diferite forme și culori în funcție de cerințele dvs. Prin urmare, continuați să experimentați și să descoperiți noi modalități de a desena forme minunate doar prin CSS.

Cum să construiți o bară de navigare receptivă folosind HTML și CSS

Apelarea tuturor dezvoltatorilor web începători: acest tutorial vă va oferi abilitățile de care aveți nevoie pentru a vă crea propriile bare de navigare responsive folosind doar HTML și CSS!

Citiți în continuare

Despre autor