Basis- en geavanceerde vormen maken met pure CSS

Heb je ooit een pure CSS-website gezien waar elk element via CSS wordt voltooid? CSS doet meer dan alleen stijlelementen. Met CSS-vormen kunnen webontwerpers aangepaste paden maken, zoals een driehoek, cirkels, polygonen en meer. Op deze manier bent u niet langer gedwongen om een ​​zwevende afbeelding met een transparante achtergrond in te voegen, maar wordt u teleurgesteld door een rechthoekig kader eromheen.

In dit artikel gebruiken we CSS-vormen en enkele functionele waarden om verschillende vormen te coderen.

Basis CSS-vormen tekenen

Laten we beginnen met de basisvormen zoals vierkant, rechthoek, driehoek, cirkel en ellips.

Vierkant en rechthoek

Vierkant en rechthoek zijn de gemakkelijkste vormen om in CSS te maken. Het enige dat u hoeft te doen, is een en geef het een hoogte en een breedte.

HTML

CSS

.rec-sq {
weergave: flexibel;
tussenruimte: 2em;
marge: 2em;
}
.vierkant {
breedte: 15rem;
hoogte: 15rem;
achtergrond: rgb (255, 123, 0);
}
.rechthoek {
breedte: 24rem;
hoogte: 14rem;
achtergrond: rgb (0, 119, 128);
}

Uitgang:

Cirkel en ellips

U hoeft alleen een toe te wijzen grens-radius van 50% tot een vierkant en je krijgt een cirkel. Doe hetzelfde met de rechthoek om een ​​ellips te krijgen.

HTML

CSS

.cirkel {
breedte: 15rem;
hoogte: 15rem;
achtergrond: rgb (255, 123, 0);
grensradius: 50%;
}
.Ovaal {
breedte: 24rem;
hoogte: 14rem;
achtergrond: rgb (0, 119, 128);
grensradius: 50%;
}

Uitgang:

driehoeken

We gebruiken randen om driehoeken te maken. Benieuwd hoe het werkt? Het enige wat u hoeft te doen is de breedte en hoogte van de driehoek naar nul. Het betekent, vooruitgaan, de werkelijke breedte van het element zal de. zijn breedte van de rand. Ook weet u misschien al dat de randen van de randen 45 graden diagonalen ten opzichte van elkaar zijn. Geef elke rand verschillende kleuren en stel elke drie in op transparant. Uiteindelijk heb je je driehoek.

HTML

CSS

//gemeenschappelijk voor iedereen
lichaam {
weergave: flexibel;
tussenruimte: 5em;
marge: 15em;
}.steekproef {
hoogte: 8.5em;
breedte: 8.5em;
border-top: 1em effen #9ee780;
rand-rechts: 1em effen rgb (240, 241, 141);
border-bottom: 1em effen rgb (145, 236, 252);
rand-links: 1em effen rgb (248, 115, 106);
}.driehoek {
hoogte: 0;
breedte: 0;
border-top: 5em effen #9ee780;
rand-rechts: 5em effen rgb (240, 241, 141);
border-bottom: 5em effen rgb (145, 236, 252);
rand-links: 5em effen rgb (248, 115, 106);
}

Uitgang:

Je kunt er mee spelen hoogte en rand kleur om verschillende soorten driehoeken te krijgen. U kunt bijvoorbeeld een driehoek maken die naar boven wijst door de te geven border-bottom een effen kleur terwijl alle andere randen zijn ingesteld op transparant. Je kunt ook een driehoek maken die in de goede richting wijst of een rechthoekige driehoek door te spelen met grensbreedte en rand kleur.

HTML

CSS

.driehoek omhoog {
hoogte: 0;
breedte: 0;
border-top: 5em effen transparant;
rand-rechts: 5em effen transparant;
border-bottom: 5em effen rgb (145, 236, 252);
rand-links: 5em effen transparant;
}
.driehoek-rechts {
breedte: 0;
hoogte: 0;
randstijl: solide;
grensbreedte: 4em 0 4em 8em;
randkleur: transparant transparant transparant rgb (245, 149, 221);
}
.driehoek-rechtsonder {
breedte: 0;
hoogte: 0;
randstijl: solide;
grensbreedte: 8em 0 0 8em;
border-kleur: transparant transparant transparant rgb (151, 235, 158);
}

Uitgang:

Geavanceerde vormen maken met CSS

Je kunt gebruiken ::voordat en ::napseudo-elementen geavanceerde vormen te maken. Door intelligent gebruik te maken van positie- en transformatie-eigenschappen, kun je eenvoudig complexe vormen bouwen met pure CSS.

Stervorm (5-punten)

U moet de randen manipuleren met behulp van de rotatiewaarde van de transformatie. Het idee is om twee kanten te creëren met a klasse = "ster", de andere twee kanten met behulp van de ::na element, en de laatste zijde met de ::voordat element.

HTML

CSS

.ster-vijf {
marge: 3.125em 0;
positie: relatief;
weergave: blok;
breedte: 0em;
hoogte: 0em;
rand-rechts: 6.25em effen transparant;
border-bottom: 4.3em solid rgb (255, 174, 81);
border-links: 6.25em effen transparant;
transformeren: roteren (35deg);
}
.star-five: voor {
border-bottom: 5em effen rgb (255, 174, 81);
border-links: 2em effen transparant;
rand-rechts: 1.875em effen transparant;
positie: absoluut;
hoogte: 0;
breedte: 0;
boven: -45px;
links: -65px;
weergave: blok;
inhoud: '';
transformeren: roteren (-35deg);
}
.star-five: na {
positie: absoluut;
weergave: blok;
boven: 3px;
links: -105px;
breedte: 0;
hoogte: 0;
rand-rechts: 6.25em effen transparant;
border-bottom: 4.3em solid rgb (255, 174, 81);
border-links: 5.95em effen transparant;
transformeren: roteren (-70deg);
inhoud: '';
}

Uitgang:

Pentagon

Je kunt een vijfhoek maken door een trapezium en een driehoek te combineren. Gebruik maken van grens en positie eigenschappen vorm en groepeer ze.

HTML

CSS

.pentagon {
positie: relatief;
breedte: 10em;
doosgrootte: inhoudsdoos;
grensbreedte: 10em 5em 0;
randstijl: solide;
randkleur: rgb (7, 185, 255) transparant;
marge-top: 20rem;
marge-links: 10rem;
}
.pentagon: voor {
inhoud: "";
positie: absoluut;
hoogte: 0;
breedte: 0;
boven: -18em;
links: -5em;
grensbreedte: 0 10em 8em;
randstijl: solide;
randkleur: transparant transparant rgb (7, 185, 255);
}

Uitgang:

Diamant

Groepeer twee driehoeken die naar boven en naar beneden wijzen en gebruik de positie om een ​​ruitvorm te creëren. Ja, we gebruiken de grens eigenschappen om deze driehoeken te maken.

HTML

CSS

.diamant {
breedte: 0;
hoogte: 0;
positie: relatief;
boven: -3em;
rand: 3em effen transparant;
border-bottom-kleur: rgb (129, 230, 255);
}
.diamant: na {
inhoud: '';
breedte: 0;
hoogte: 0;
positie: absoluut;
links: -3em;
boven: 3em;
rand: 3em effen transparant;
border-top-kleur: rgb (129, 230, 255);
}

Uitgang:

U kunt de vorm van een diamanten schild maken door de hoogte van de bovenste driehoek te wijzigen, zoals hieronder wordt weergegeven:

HTML

CSS

.diamant-schild
{
breedte: 0;
hoogte: 0;
rand: 3em effen transparant;
border-bottom: 1,25em effen rgb (71, 194, 231);
positie: relatief;
boven: -3em;
}
.diamant-cut: na {
inhoud: '';
positie: absoluut;
links: -3em;
boven: 1.25em;
breedte: 0;
hoogte: 0;
rand: 3em effen transparant;
border-top: 4.4em effen rgb (71, 194, 231);
}

Uitgang:

Hart

De hartvorm is een beetje moeilijk, maar je kunt het doen door te gebruiken ::voordat en ::na pseudo-elementen. U kunt verschillende waarden van gebruiken transformeren om ze vanuit verschillende hoeken te draaien totdat ze perfect een hartvorm vormen. Uiteindelijk kun je instellen transformatie-oorsprong om het punt in te stellen waarop de transformatie wordt toegepast.

HTML

CSS

.hart {
breedte: 6.25em;
hoogte: 55em;
positie: relatief;
}
.hart: voor,
.hart: na {
inhoud: "";
breedte: 3em;
hoogte: 5m;
positie: absoluut;
links: 3em;
boven: 0;
achtergrond: rood;
grensradius: 3em 3em 0 0;
transformeren: roteren (-45deg);
transformatie-oorsprong: 0 100%;
}
.hart: na {
links: 0;
transformeren: roteren (45deg);
transformatie-oorsprong: 100% 100%;
}

Uitgang:

Experimenteer met pure CSS-vormen

U zou nu bekend moeten zijn met verschillende pure CSS-afbeeldingen die kunnen worden gebouwd door een paar regels code te schrijven. Het bouwen van een supersnelle website is geen hectische taak meer omdat je weet hoe je met de code moet spelen. Het beste is dat je kunt resoneren met de stem van het merk door verschillende vormen en kleuren te manipuleren op basis van je behoefte. Blijf daarom experimenteren en ontdek nieuwe manieren om geweldige vormen te tekenen, puur door CSS.

Een responsieve navigatiebalk bouwen met HTML en CSS

Oproep aan alle beginnende webontwikkelaars: deze tutorial geeft je de vaardigheden die je nodig hebt om je eigen responsieve navigatiebalken te maken met alleen HTML en CSS!

Lees volgende

Over de auteur