Sådan laver du grundlæggende og avancerede former med ren CSS

Har du nogensinde set et rent CSS-websted, hvor hvert eneste element er færdiggjort gennem CSS? CSS gør mere end blot stylingelementer. CSS-former giver webdesignere mulighed for at oprette brugerdefinerede stier som en trekant, cirkler, polygoner og mere. På denne måde er du ikke længere tvunget til at indsætte et svævende billede med en gennemsigtig baggrund, kun for at blive skuffet over en rektangulær boks omkring det.

I denne artikel bruger vi CSS-former og et par funktionelle værdier til at kode forskellige former.

Tegning af grundlæggende CSS-former

Lad os starte med de grundlæggende former som firkant, rektangel, trekant, cirkel og ellipse.

Firkant og rektangel

Firkant og rektangel er de nemmeste former at lave i CSS. Alt du skal gøre er at oprette en og giv den en højde og en bredde.

HTML

CSS

.rec-sq {
display: flex;
mellemrum: 2em;
margin: 2em;
}
.square {
bredde: 15rem;
højde: 15rem;
baggrund: rgb (255, 123, 0);
}
.rektangel {
bredde: 24rem;
højde: 14rem;
baggrund: rgb (0, 119, 128);
}

Produktion:

Cirkel og Ellipse

Du skal blot tildele en grænse-radius på 50 % til en firkant, og du får en cirkel. Gør det samme med rektanglet for at få en ellipse.

HTML

CSS

.circle {
bredde: 15rem;
højde: 15rem;
baggrund: rgb (255, 123, 0);
grænse-radius: 50%;
}
.ellipse {
bredde: 24rem;
højde: 14rem;
baggrund: rgb (0, 119, 128);
grænse-radius: 50%;
}

Produktion:

Trekanter

Vi bruger grænser til at skabe trekanter. Gad vide, hvordan det virker? Alt du skal gøre er at indstille bredde og højde af trekanten til nul. Det betyder, at gå fremad faktiske bredde af elementet vil være bredden af ​​grænsen. Du ved måske allerede, at kantkanterne er 45 graders diagonaler i forhold til hinanden. Giv forskellige farver til hver kant, og indstil tre af dem til gennemsigtige. I sidste ende har du din trekant.

HTML

CSS

//fælles for alle
krop {
display: flex;
mellemrum: 5em;
margin: 15em;
}.sample {
højde: 8,5 em;
bredde: 8,5 em;
border-top: 1em solid #9ee780;
grænse-højre: 1em solid rgb (240, 241, 141);
kant-bund: 1em solid rgb (145, 236, 252);
grænse-venstre: 1em solid rgb (248, 115, 106);
}.triangle {
højde: 0;
bredde: 0;
border-top: 5em solid #9ee780;
grænse-højre: 5em solid rgb (240, 241, 141);
kant-bund: 5em solid rgb (145, 236, 252);
grænse-venstre: 5em solid rgb (248, 115, 106);
}

Produktion:

Du kan lege med højde og kant-farve for at få forskellige typer trekanter. For eksempel kan du oprette en trekant, der peger i retning opad ved at give grænse-bund en ensfarvet, mens alle andre kanter er sat til gennemsigtige. Du kan også lave en trekant, der peger i den rigtige retning, eller en retvinklet trekant ved at lege med grænse-bredde og kant-farve.

HTML

CSS

.triangle-up {
højde: 0;
bredde: 0;
border-top: 5em solid gennemsigtig;
grænse-højre: 5em solid gennemsigtig;
kant-bund: 5em solid rgb (145, 236, 252);
grænse-venstre: 5em solid gennemsigtig;
}
.triangle-right {
bredde: 0;
højde: 0;
grænse-stil: solid;
grænse-bredde: 4em 0 4em 8em;
kantfarve: gennemsigtig gennemsigtig gennemsigtig rgb (245, 149, 221);
}
.triangle-bottom-right {
bredde: 0;
højde: 0;
grænse-stil: solid;
grænse-bredde: 8em 0 0 8em;
kantfarve: gennemsigtig gennemsigtig gennemsigtig rgb (151, 235, 158);
}

Produktion:

Oprettelse af avancerede former ved hjælp af CSS

Du kan bruge ::Før og ::efterpseudo-elementer at skabe avancerede former. Med den intelligente brug af positions- og transformationsegenskaber kan du nemt bygge komplekse former ved hjælp af ren CSS.

Stjerneform (5-point)

Du bliver nødt til at manipulere grænserne ved at bruge transformationens rotationsværdi. Ideen er at skabe to sider ved hjælp af en klasse = "stjerne", de to andre sider ved hjælp af ::efter element, og den sidste side ved hjælp af ::Før element.

HTML

CSS

.star-five {
margin: 3,125em 0;
stilling: relativ;
display: blok;
bredde: 0em;
højde: 0em;
grænse-højre: 6.25em solid gennemsigtig;
kant-bund: 4,3em solid rgb (255, 174, 81);
kant-venstre: 6.25em solid gennemsigtig;
transformere: rotere (35 grader);
}
.star-five: før {
kant-bund: 5em solid rgb (255, 174, 81);
grænse-venstre: 2em solid gennemsigtig;
grænse-højre: 1.875em solid gennemsigtig;
position: absolut;
højde: 0;
bredde: 0;
top: -45px;
venstre: -65px;
display: blok;
indhold: '';
transformere: rotere(-35deg);
}
.star-five: efter {
position: absolut;
display: blok;
top: 3px;
venstre: -105px;
bredde: 0;
højde: 0;
grænse-højre: 6.25em solid gennemsigtig;
kant-bund: 4,3em solid rgb (255, 174, 81);
kant-venstre: 5.95em solid gennemsigtig;
transformere: rotere(-70 grader);
indhold: '';
}

Produktion:

Pentagon

Du kan skabe en femkant ved at kombinere en trapez og en trekant. Brug grænse og position egenskaber forme og gruppere dem.

HTML

CSS

.pentagon {
stilling: relativ;
bredde: 10em;
box-sizing: content-box;
grænse-bredde: 10em 5em 0;
grænse-stil: solid;
kantfarve: rgb (7, 185, 255) gennemsigtig;
margin-top: 20rem;
margin-venstre: 10rem;
}
.pentagon: før {
indhold: "";
position: absolut;
højde: 0;
bredde: 0;
top: -18em;
venstre: -5em;
kant-bredde: 0 10em 8em;
grænse-stil: solid;
kant-farve: gennemsigtig gennemsigtig rgb (7, 185, 255);
}

Produktion:

Diamant

Gruppér to trekanter, der peger opad og nedad ved hjælp af position for at skabe en diamantform. Ja, vi bruger grænse egenskaber til at skabe disse trekanter.

HTML

CSS

.diamond {
bredde: 0;
højde: 0;
stilling: relativ;
top: -3em;
kant: 3em solid gennemsigtig;
kant-bund-farve: rgb (129, 230, 255);
}
.diamond: efter {
indhold: '';
bredde: 0;
højde: 0;
position: absolut;
venstre: -3em;
top: 3em;
kant: 3em solid gennemsigtig;
kant-top-farve: rgb (129, 230, 255);
}

Produktion:

Du kan skabe en diamantskjoldform ved at ændre højden af ​​toptrekanten som vist nedenfor:

HTML

CSS

.diamant-skjold
{
bredde: 0;
højde: 0;
kant: 3em solid gennemsigtig;
kant-bund: 1,25em solid rgb (71, 194, 231);
stilling: relativ;
top: -3em;
}
.diamond-cut: efter {
indhold: '';
position: absolut;
venstre: -3em;
top: 1,25em;
bredde: 0;
højde: 0;
kant: 3em solid gennemsigtig;
border-top: 4,4em solid rgb (71, 194, 231);
}

Produktion:

Hjerte

Hjerteformen er lidt hård, men du kan gøre det ved at bruge ::Før og ::efter pseudo-elementer. Du kan bruge forskellige værdier af transformere at rotere dem fra forskellige vinkler, indtil de perfekt danner en hjerteform. I sidste ende kan du indstille transformations-oprindelse for at indstille det punkt, omkring hvilket transformationen anvendes.

HTML

CSS

.heart {
bredde: 6,25 em;
højde: 55em;
stilling: relativ;
}
.hjerte: før,
.heart: efter {
indhold: "";
bredde: 3em;
højde: 5em;
position: absolut;
venstre: 3em;
top: 0;
baggrund: rød;
grænse-radius: 3em 3em 0 0;
transformere: rotere(-45deg);
transformationsoprindelse: 0 100%;
}
.heart: efter {
venstre: 0;
transformere: rotere (45 grader);
transformationsoprindelse: 100% 100%;
}

Produktion:

Eksperimenter med rene CSS-former

Du bør nu være bekendt med forskellige rene CSS-billeder, der kan bygges ved at skrive et par linjer kode. At bygge en superhurtig hjemmeside er ikke en hektisk opgave længere, da du ved, hvordan du leger med koden. Det bedste er, at du kan resonere med mærkets stemme ved at manipulere forskellige former og farver i overensstemmelse med dine krav. Bliv derfor ved med at eksperimentere og opdag nye måder at tegne fantastiske figurer på udelukkende ved hjælp af CSS.

Sådan opbygger du en responsiv navigationslinje ved hjælp af HTML og CSS

Kalder alle nybegyndere web-udviklere: denne tutorial vil give dig de færdigheder, du har brug for til at oprette dine egne responsive navbarer ved hjælp af kun HTML og CSS!

Læs Næste

Om forfatteren