Hogyan készítsünk alapvető és haladó alakzatokat tiszta CSS-sel

Látott már olyan tiszta CSS webhelyet, ahol minden egyes elem CSS-en keresztül fejeződik be? A CSS többre képes, mint pusztán stíluselemek. A CSS-alakzatok lehetővé teszik a webtervezők számára, hogy egyéni útvonalakat hozzanak létre, például háromszöget, köröket, sokszögeket stb. Így többé nem kell átlátszó hátterű lebegő képet beszúrnia, csak a körülötte lévő téglalap alakú doboz miatt csalódnia kell.

Ebben a cikkben CSS-alakzatokat és néhány funkcionális értéket fogunk használni a különböző alakzatok kódolásához.

Alapvető CSS-alakzatok rajzolása

Kezdjük az alapvető formákkal, mint a négyzet, téglalap, háromszög, kör és ellipszis.

Négyzet és téglalap

A CSS-ben a négyzet és a téglalap a legkönnyebben elkészíthető alakzatok. Mindössze annyit kell tennie, hogy létrehozza a és adj neki a magasság és a szélesség.

HTML

CSS

.rec-sq {
kijelző: flex;
rés: 2em;
margó: 2em;
}
.négyzet {
szélesség: 15 rem;
magasság: 15 rem;
háttér: rgb (255, 123, 0);
}
.rectangle {
szélesség: 24 rem;
magasság: 14 rem;
háttér: rgb (0, 119, 128);
}

Kimenet:

Kör és ellipszis

Csak hozzá kell rendelnie a határ-sugár 50%-ot egy négyzetre, és kapsz egy kört. Tegye ugyanezt a téglalappal, hogy ellipszist kapjon.

HTML

CSS

.kör {
szélesség: 15 rem;
magasság: 15 rem;
háttér: rgb (255, 123, 0);
határsugár: 50%;
}
.ellipse {
szélesség: 24 rem;
magasság: 14 rem;
háttér: rgb (0, 119, 128);
határsugár: 50%;
}

Kimenet:

Háromszögek

Szegélyeket használunk háromszögek létrehozásához. Kíváncsi vagy, hogyan működik? Mindössze annyit kell tennie, hogy beállítja a szélesség és magasság a háromszög nullára. Ez azt jelenti, hogy előre haladva a tényleges szélesség az elem lesz a a szegély szélessége. Azt is tudhatod, hogy a szegélyélek 45 fokos átlósak egymáshoz képest. Adjon különböző színeket minden szegélynek, és állítsa bármelyik hármat átlátszóvá. Végül meglesz a háromszöged.

HTML

CSS

//mindenkiben közös
body {
kijelző: flex;
rés: 5em;
margó: 15em;
}.sample {
magasság: 8,5em;
szélesség: 8,5em;
border-top: 1em tömör #9ee780;
szegély-jobb: 1em tömör rgb (240, 241, 141);
keret-alsó: 1em tömör rgb (145, 236, 252);
border-bal: 1em tömör rgb (248, 115, 106);
}.triangle {
magasság: 0;
szélesség: 0;
border-top: 5em tömör #9ee780;
szegély-jobb: 5em tömör rgb (240, 241, 141);
szegély-alsó: 5 em tömör rgb (145, 236, 252);
border-bal: 5em solid rgb (248, 115, 106);
}

Kimenet:

Játszhatsz vele magasság és határ-szín hogy különböző típusú háromszögeket kapjunk. Például létrehozhat egy felfelé mutató háromszöget, ha megadja a határ-alsó egyszínű, míg az összes többi szegély átlátszóra van állítva. Létrehozhat egy jó irányba mutató háromszöget vagy egy derékszögű háromszöget, ha játsza határ-szélesség és határ-szín.

HTML

CSS

.triangle-up {
magasság: 0;
szélesség: 0;
szegély felső: 5em tömör átlátszó;
szegély-jobb: 5em tömör átlátszó;
szegély-alsó: 5 em tömör rgb (145, 236, 252);
szegély-bal: 5em tömör átlátszó;
}
.triangle-right {
szélesség: 0;
magasság: 0;
szegély-stílus: tömör;
keret-szélesség: 4em 0 4em 8em;
keretszín: átlátszó átlátszó átlátszó rgb (245, 149, 221);
}
.triangle-bottom-right {
szélesség: 0;
magasság: 0;
szegély-stílus: tömör;
keret-szélesség: 8em 0 0 8em;
keretszín: átlátszó átlátszó átlátszó rgb (151, 235, 158);
}

Kimenet:

Speciális alakzatok létrehozása CSS használatával

Te tudod használni ::előtt és ::utánpszeudo-elemek fejlett formák létrehozásához. A pozíció- és transzformációs tulajdonságok intelligens használatával egyszerűen készíthet összetett alakzatokat tiszta CSS használatával.

Csillag alak (5 pont)

A szegélyeket az átalakítás rotate értékével kell manipulálnia. Az ötlet az, hogy két oldalt hozzunk létre a osztály = "csillag", a másik két oldal segítségével a ::után elemet, és az utolsó oldalt a ::előtt elem.

HTML

CSS

.star-five {
margó: 3,125em 0;
pozíció: relatív;
kijelző: blokk;
szélesség: 0em;
magasság: 0em;
szegély-jobb: 6,25em tömör átlátszó;
border-bottom: 4,3em solid rgb (255, 174, 81);
szegély-bal: 6,25 em tömör átlátszó;
transzformáció: forgatás (35 fok);
}
.star-five: before {
szegély-alsó: 5 em tömör rgb (255, 174, 81);
szegély-bal: 2em tömör átlátszó;
szegély-jobb: 1,875 em tömör átlátszó;
pozíció: abszolút;
magasság: 0;
szélesség: 0;
felső: -45px;
balra: -65px;
kijelző: blokk;
tartalom: '';
transzformáció: forgatás (-35 fok);
}
.star-five: { után
pozíció: abszolút;
kijelző: blokk;
felső: 3px;
balra: -105px;
szélesség: 0;
magasság: 0;
szegély-jobb: 6,25em tömör átlátszó;
border-bottom: 4,3em solid rgb (255, 174, 81);
szegély-bal: 5,95 em tömör átlátszó;
transzformáció: forgatás (-70 fok);
tartalom: '';
}

Kimenet:

Pentagon

Egy trapéz és egy háromszög kombinálásával ötszöget hozhat létre. Használat határ és pozíció tulajdonságai formálja és csoportosítsa őket.

HTML

CSS

.pentagon {
pozíció: relatív;
szélesség: 10em;
box-sizing: content-box;
keret szélessége: 10em 5em 0;
szegély-stílus: tömör;
keretszín: rgb (7, 185, 255) átlátszó;
margó-felső: 20rem;
margó-bal: 10rem;
}
.pentagon: before {
tartalom: "";
pozíció: abszolút;
magasság: 0;
szélesség: 0;
felső: -18em;
balra: -5em;
keret szélessége: 0 10em 8em;
szegély-stílus: tömör;
szegélyszín: átlátszó átlátszó rgb (7, 185, 255);
}

Kimenet:

gyémánt

Csoportosítson két felfelé és lefelé mutató háromszöget a pozíció segítségével, hogy rombusz alakot hozzon létre. Igen, használjuk a határ tulajdonságokkal létrehozni ezeket a háromszögeket.

HTML

CSS

.gyémánt {
szélesség: 0;
magasság: 0;
pozíció: relatív;
felső: -3em;
szegély: 3em tömör átlátszó;
szegély-alsó szín: rgb (129, 230, 255);
}
.diamond: { után
tartalom: '';
szélesség: 0;
magasság: 0;
pozíció: abszolút;
balra: -3em;
felső: 3em;
szegély: 3em tömör átlátszó;
keret-felső szín: rgb (129, 230, 255);
}

Kimenet:

Gyémánt pajzs formát hozhat létre a felső háromszög magasságának megváltoztatásával az alábbiak szerint:

HTML

CSS

.gyémánt-pajzs
{
szélesség: 0;
magasság: 0;
szegély: 3em tömör átlátszó;
border-bottom: 1,25 em, tömör rgb (71, 194, 231);
pozíció: relatív;
felső: -3em;
}
.diamond-cut: { után
tartalom: '';
pozíció: abszolút;
balra: -3em;
felső: 1,25 em;
szélesség: 0;
magasság: 0;
szegély: 3em tömör átlátszó;
border-top: 4,4em solid rgb (71, 194, 231);
}

Kimenet:

Szív

A szív alakú kissé kemény, de használatával meg tudod csinálni ::előtt és ::után pszeudo-elemek. Különböző értékeket használhat átalakítani különböző szögekből forgatni őket, amíg tökéletesen szív alakút nem formálnak. Végül beállíthatja átalakulás-eredetű hogy beállítsa azt a pontot, amely körül az átalakítást alkalmazni kell.

HTML

CSS

.szív {
szélesség: 6,25em;
magasság: 55em;
pozíció: relatív;
}
.heart: előtt,
.heart: { után
tartalom: "";
szélesség: 3em;
magasság: 5em;
pozíció: abszolút;
balra: 3em;
felső: 0;
háttér: piros;
határsugár: 3em 3em 0 0;
transzformáció: forgatás (-45 fok);
transzformációs eredetű: 0 100%;
}
.heart: { után
balra: 0;
transzformáció: forgatás (45 fokkal);
transzformációs eredetű: 100% 100%;
}

Kimenet:

Kísérletezzen tiszta CSS-alakzatokkal

Most már ismernie kell a különböző tiszta CSS-képeket, amelyeket néhány sornyi kód írásával lehet felépíteni. Egy szupergyors webhely készítése már nem hektikus feladat, hiszen tudja, hogyan kell játszani a kóddal. A legjobb az egészben az, hogy a különböző formák és színek igényeinek megfelelő manipulálásával rezonálhat a márka hangjával. Ezért folytassa a kísérletezést, és fedezzen fel új módszereket a fantasztikus formák pusztán CSS segítségével történő rajzolására.

Hogyan készítsünk érzékeny navigációs sávot HTML és CSS használatával

Minden kezdő webfejlesztő felhívása: ez az oktatóanyag megadja azokat a készségeket, amelyekre szüksége van saját, reszponzív navigációs sávok létrehozásához csupán HTML és CSS használatával!

Olvassa el a következőt

A szerzőről