Hvordan lage grunnleggende og avanserte former med ren CSS

Har du noen gang sett et rent CSS-nettsted der hvert eneste element er ferdig gjennom CSS? CSS gjør mer enn bare stylingelementer. CSS-former lar webdesignere lage tilpassede baner som en trekant, sirkler, polygoner og mer. På denne måten er du ikke lenger tvunget til å sette inn et flytende bilde med en gjennomsiktig bakgrunn, bare for å bli skuffet over en rektangulær boks rundt.

I denne artikkelen bruker vi CSS-former og noen funksjonelle verdier for å kode forskjellige former.

Tegne grunnleggende CSS-former

La oss starte med de grunnleggende formene som firkant, rektangel, trekant, sirkel og ellipse.

Firkant og rektangel

Firkant og rektangel er de enkleste formene å lage i CSS. Alt du trenger å gjøre er å lage en og gi den en høyde og a bredde.

HTML

CSS

.rec-sq {
display: flex;
gap: 2em;
margin: 2em;
}
.torget {
bredde: 15rem;
høyde: 15rem;
bakgrunn: rgb (255, 123, 0);
}
.rectangle {
bredde: 24rem;
høyde: 14rem;
bakgrunn: rgb (0, 119, 128);
}

Produksjon:

Sirkel og Ellipse

Du trenger bare å tildele en

grense-radius på 50 % til en firkant, og du får en sirkel. Gjør det samme med rektangelet for å få en ellipse.

HTML

CSS

.circle {
bredde: 15rem;
høyde: 15rem;
bakgrunn: rgb (255, 123, 0);
kantradius: 50 %;
}
.ellipse {
bredde: 24rem;
høyde: 14rem;
bakgrunn: rgb (0, 119, 128);
kantradius: 50 %;
}

Produksjon:

Trekanter

Vi bruker grenser for å lage trekanter. Lurer du på hvordan det fungerer? Alt du trenger å gjøre er å stille inn bredde og høyde av trekanten til null. Det betyr å gå fremover faktisk bredde av elementet vil være bredden på kanten. Dessuten vet du kanskje allerede at kantkantene er 45-graders diagonaler til hverandre. Gi forskjellige farger til hver kant og sett alle tre av dem til gjennomsiktige. Til syvende og sist vil du ha trekanten din.

HTML

CSS

//felles for alle
kropp {
display: flex;
gap: 5em;
margin: 15em;
}.prøve {
høyde: 8,5 em;
bredde: 8,5 em;
border-top: 1em solid #9ee780;
grense-høyre: 1em solid rgb (240, 241, 141);
kant-bunn: 1em solid rgb (145, 236, 252);
kant-venstre: 1em solid rgb (248, 115, 106);
}.triangle {
høyde: 0;
bredde: 0;
border-top: 5em solid #9ee780;
grense-høyre: 5em solid rgb (240, 241, 141);
kant-bunn: 5em solid rgb (145, 236, 252);
kant-venstre: 5em solid rgb (248, 115, 106);
}

Produksjon:

Du kan leke med høyde og grensefarge for å få forskjellige typer trekanter. Du kan for eksempel lage en trekant som peker oppover ved å gi grense-bunn en solid farge mens alle de andre kantene er satt til gjennomsiktige. Du kan også lage en trekant som peker i riktig retning eller en rettvinklet trekant ved å leke med kant-bredde og grensefarge.

HTML

CSS

.triangle-up {
høyde: 0;
bredde: 0;
border-top: 5em solid gjennomsiktig;
kant-høyre: 5em solid gjennomsiktig;
kant-bunn: 5em solid rgb (145, 236, 252);
kant-venstre: 5em solid gjennomsiktig;
}
.triangle-right {
bredde: 0;
høyde: 0;
border-stil: solid;
kant-bredde: 4em 0 4em 8em;
kantfarge: gjennomsiktig gjennomsiktig gjennomsiktig rgb (245, 149, 221);
}
.triangle-bottom-right {
bredde: 0;
høyde: 0;
border-stil: solid;
kant-bredde: 8em 0 0 8em;
kantfarge: gjennomsiktig gjennomsiktig gjennomsiktig rgb (151, 235, 158);
}

Produksjon:

Opprette avanserte former ved hjelp av CSS

Du kan bruke ::før og ::etterpseudo-elementer å lage avanserte former. Med intelligent bruk av posisjons- og transformasjonsegenskaper kan du enkelt bygge komplekse former ved hjelp av ren CSS.

Stjerneform (5-poeng)

Du må manipulere grensene ved å bruke rotasjonsverdien til transformasjonen. Tanken er å lage to sider ved å bruke en class="stjerne", de to andre sidene bruker ::etter element, og den siste siden ved hjelp av ::før element.

HTML

CSS

.star-five {
margin: 3.125em 0;
stilling: pårørende;
display: blokk;
bredde: 0em;
høyde: 0em;
kant-høyre: 6,25 em solid gjennomsiktig;
kant-bunn: 4,3em solid rgb (255, 174, 81);
kant til venstre: 6,25 em solid gjennomsiktig;
transformere: rotere (35 grader);
}
.star-five: før {
kant-bunn: 5em solid rgb (255, 174, 81);
kant-venstre: 2em solid gjennomsiktig;
kant-høyre: 1.875em solid gjennomsiktig;
posisjon: absolutt;
høyde: 0;
bredde: 0;
topp: -45px;
venstre: -65px;
display: blokk;
innhold: '';
transform: rotere(-35 grader);
}
.star-five: etter {
posisjon: absolutt;
display: blokk;
topp: 3px;
venstre: -105px;
bredde: 0;
høyde: 0;
kant-høyre: 6,25 em solid gjennomsiktig;
kant-bunn: 4,3em solid rgb (255, 174, 81);
kant til venstre: 5,95 em solid gjennomsiktig;
transform: rotere(-70 grader);
innhold: '';
}

Produksjon:

Pentagon

Du kan lage en femkant ved å kombinere en trapes og en trekant. Bruk grense og posisjonsegenskaper forme og gruppere dem.

HTML

CSS

.pentagon {
stilling: pårørende;
bredde: 10em;
boksstørrelse: innholdsboks;
kant-bredde: 10em 5em 0;
border-stil: solid;
kantfarge: rgb (7, 185, 255) gjennomsiktig;
margin-topp: 20rem;
marg-venstre: 10rem;
}
.pentagon: før {
innhold: "";
posisjon: absolutt;
høyde: 0;
bredde: 0;
topp: -18em;
venstre: -5em;
kant-bredde: 0 10em 8em;
border-stil: solid;
kantfarge: gjennomsiktig gjennomsiktig rgb (7, 185, 255);
}

Produksjon:

Diamant

Grupper to trekanter som peker oppover og nedover ved å bruke posisjon for å lage en diamantform. Ja, vi bruker grense egenskaper for å lage disse trekantene.

HTML

CSS

.diamond {
bredde: 0;
høyde: 0;
stilling: pårørende;
topp: -3em;
kant: 3em solid gjennomsiktig;
kant-bunn-farge: rgb (129, 230, 255);
}
.diamond: etter {
innhold: '';
bredde: 0;
høyde: 0;
posisjon: absolutt;
venstre: -3em;
topp: 3em;
kant: 3em solid gjennomsiktig;
kant-topp-farge: rgb (129, 230, 255);
}

Produksjon:

Du kan lage en diamantskjoldform ved å endre høyden på topptrekanten som vist nedenfor:

HTML

CSS

.diamant-skjold
{
bredde: 0;
høyde: 0;
kant: 3em solid gjennomsiktig;
kant-bunn: 1,25em solid rgb (71, 194, 231);
stilling: pårørende;
topp: -3em;
}
.diamond-cut: etter {
innhold: '';
posisjon: absolutt;
venstre: -3em;
topp: 1,25em;
bredde: 0;
høyde: 0;
kant: 3em solid gjennomsiktig;
border-top: 4,4em solid rgb (71, 194, 231);
}

Produksjon:

Hjerte

Hjerteformen er litt vanskelig, men du kan gjøre det ved å bruke ::før og ::etter pseudo-elementer. Du kan bruke forskjellige verdier av forvandle å rotere dem fra forskjellige vinkler til de perfekt danner en hjerteform. Til syvende og sist kan du stille inn transform-opprinnelse for å angi punktet som transformasjonen skal brukes rundt.

HTML

CSS

.heart {
bredde: 6,25 em;
høyde: 55em;
stilling: pårørende;
}
.hjerte: før,
.heart: etter {
innhold: "";
bredde: 3em;
høyde: 5em;
posisjon: absolutt;
venstre: 3em;
topp: 0;
bakgrunn: rød;
kantradius: 3em 3em 0 0;
transform: rotere(-45 grader);
transformasjonsopprinnelse: 0 100 %;
}
.heart: etter {
venstre: 0;
transformere: rotere (45 grader);
transformasjonsopprinnelse: 100 % 100 %;
}

Produksjon:

Eksperimenter med rene CSS-former

Du bør nå være kjent med forskjellige rene CSS-bilder som kan bygges ved å skrive noen få linjer med kode. Å bygge en superrask nettside er ikke en hektisk oppgave lenger, siden du vet hvordan du leker med koden. Det beste er at du kan resonere med merkevarens stemme ved å manipulere forskjellige former og farger i henhold til dine krav. Fortsett derfor å eksperimentere og oppdag nye måter å tegne fantastiske former utelukkende ved hjelp av CSS.

Hvordan bygge en responsiv navigasjonslinje ved hjelp av HTML og CSS

Ringer alle nybegynnere på nettutviklere: denne opplæringen vil gi deg ferdighetene du trenger for å lage dine egne responsive navbarer ved å bruke bare HTML og CSS!

Les Neste

Om forfatteren