Jak vytvořit základní a pokročilé tvary s čistým CSS

Už jste někdy viděli čistě CSS web, kde je každý prvek dokončen pomocí CSS? CSS umí víc než jen styling prvků. Tvary CSS umožňují webovým designérům vytvářet vlastní cesty, jako je trojúhelník, kruhy, mnohoúhelníky a další. Tímto způsobem již nejste nuceni vkládat plovoucí obrázek s průhledným pozadím, ale budete zklamáni obdélníkovým rámečkem kolem něj.

V tomto článku použijeme tvary CSS a několik funkčních hodnot ke kódování různých tvarů.

Kreslení základních tvarů CSS

Začněme se základními tvary, jako je čtverec, obdélník, trojúhelník, kruh a elipsa.

Čtverec a obdélník

Čtverec a obdélník jsou nejjednodušší tvary v CSS. Vše, co musíte udělat, je vytvořit a a dát to a výška a šířka.

HTML

CSS

.rec-sq {
displej: flex;
mezera: 2em;
okraj: 2em;
}
.náměstí {
šířka: 15rem;
výška: 15rem;
pozadí: rgb (255, 123, 0);
}
.obdélník {
šířka: 24rem;
výška: 14rem;
pozadí: rgb (0, 119, 128);
}

Výstup:

Kruh a elipsa

Stačí přiřadit a hraniční poloměr 50 % na čtverec a získáte kruh. Udělejte totéž s obdélníkem, abyste získali elipsu.

HTML

CSS

.kruh {
šířka: 15rem;
výška: 15rem;
pozadí: rgb (255, 123, 0);
hraniční rádius: 50 %;
}
.elipsa {
šířka: 24rem;
výška: 14rem;
pozadí: rgb (0, 119, 128);
hraniční rádius: 50 %;
}

Výstup:

Trojúhelníky

K vytvoření trojúhelníků použijeme hranice. Ptáte se, jak to funguje? Vše, co musíte udělat, je nastavit šířka a výška trojúhelníku na nulu. Znamená to posunout se vpřed, skutečná šířka prvku bude šířka hranice. Také už možná víte, že okraje hranic jsou vůči sobě úhlopříčky 45 stupňů. Každému okraji dejte různé barvy a nastavte libovolné tři z nich na průhledné. Nakonec budete mít svůj trojúhelník.

HTML

CSS

//společné pro všechny
tělo {
displej: flex;
mezera: 5 em;
okraj: 15em;
}.vzorek {
výška: 8,5 em;
šířka: 8,5em;
border-top: 1em solid #9ee780;
border-right: 1em solid rgb (240, 241, 141);
border-bottom: 1em solid rgb (145, 236, 252);
border-left: 1em solid rgb (248, 115, 106);
}.trojúhelník {
výška: 0;
šířka: 0;
border-top: 5em solid #9ee780;
border-right: 5em solid rgb (240, 241, 141);
border-bottom: 5em solid rgb (145, 236, 252);
border-left: 5em solid rgb (248, 115, 106);
}

Výstup:

Můžete si s tím pohrát výška a barva ohraničení získat různé typy trojúhelníků. Můžete například vytvořit trojúhelník směřující směrem nahoru zadáním hranice-dole plnou barvu, zatímco všechny ostatní okraje jsou nastaveny na průhledné. Hraním si také můžete vytvořit trojúhelník ukazující správným směrem nebo pravoúhlý trojúhelník hranice-šířka a barva ohraničení.

HTML

CSS

.triangle-up {
výška: 0;
šířka: 0;
border-top: 5em pevná průhledná;
okraj-pravý: 5em pevná průhledná;
border-bottom: 5em solid rgb (145, 236, 252);
okraj-levý: 5em pevná průhledná;
}
.triangle-right {
šířka: 0;
výška: 0;
styl ohraničení: pevný;
šířka okraje: 4em 0 4em 8em;
border-color: transparent transparent transparent rgb (245, 149, 221);
}
.triangle-bottom-right {
šířka: 0;
výška: 0;
styl ohraničení: pevný;
šířka okraje: 8em 0 0 8em;
border-color: transparent transparent transparent rgb (151, 235, 158);
}

Výstup:

Vytváření pokročilých tvarů pomocí CSS

Můžeš použít ::před a ::popseudoprvky k vytvoření pokročilých tvarů. S inteligentním využitím vlastností pozic a transformací můžete snadno vytvářet složité tvary pomocí čistého CSS.

Hvězdný tvar (5 bodů)

Budete muset manipulovat s okraji pomocí hodnoty otočení transformace. Cílem je vytvořit dvě strany pomocí a třída = "hvězda", ostatní dvě strany pomocí ::po prvek a poslední strana pomocí ::před živel.

HTML

CSS

.star-five {
marže: 3,125em 0;
poloha: relativní;
displej: blok;
šířka: 0em;
výška: 0em;
border-right: 6,25em solid transparent;
border-bottom: 4,3em solid rgb (255, 174, 81);
border-left: 6.25em solid transparent;
transformace: otočení (35 stupňů);
}
.star-five: před {
border-bottom: 5em solid rgb (255, 174, 81);
border-left: 2em solid transparent;
border-right: 1.875em solid transparent;
pozice: absolutní;
výška: 0;
šířka: 0;
horní: -45px;
vlevo: -65px;
displej: blok;
obsah: '';
transformace: rotace(-35deg);
}
.star-five: po {
pozice: absolutní;
displej: blok;
nahoře: 3px;
vlevo: -105px;
šířka: 0;
výška: 0;
border-right: 6,25em solid transparent;
border-bottom: 4,3em solid rgb (255, 174, 81);
border-left: 5,95em solid transparent;
transformace: rotace(-70deg);
obsah: '';
}

Výstup:

Pentagon

Kombinací lichoběžníku a trojúhelníku můžete vytvořit pětiúhelník. Použití okraj a vlastnosti polohy tvarovat a seskupovat je.

HTML

CSS

.pentagon {
poloha: relativní;
šířka: 10em;
box-sizing: content-box;
šířka okraje: 10em 5em 0;
styl ohraničení: pevný;
border-color: rgb (7, 185, 255) transparentní;
margin-top: 20rem;
okraj-levý: 10rem;
}
.pentagon: před {
obsah: "";
pozice: absolutní;
výška: 0;
šířka: 0;
nahoře: -18em;
vlevo: -5em;
hranice-šířka: 0 10em 8em;
styl ohraničení: pevný;
border-color: transparentní transparentní rgb (7, 185, 255);
}

Výstup:

diamant

Seskupte dva trojúhelníky směřující nahoru a dolů pomocí pozice k vytvoření tvaru kosočtverce. Ano, použijeme okraj vlastnosti k vytvoření těchto trojúhelníků.

HTML

CSS

.diamant {
šířka: 0;
výška: 0;
poloha: relativní;
horní: -3em;
okraj: 3em pevný průhledný;
border-bottom-color: rgb (129, 230, 255);
}
.diamant: po {
obsah: '';
šířka: 0;
výška: 0;
pozice: absolutní;
vlevo: -3em;
nahoře: 3em;
okraj: 3em pevný průhledný;
border-top-color: rgb (129, 230, 255);
}

Výstup:

Tvar diamantového štítu můžete vytvořit změnou výšky horního trojúhelníku, jak je znázorněno níže:

HTML

CSS

.diamant-štít
{
šířka: 0;
výška: 0;
okraj: 3em pevný průhledný;
border-bottom: 1,25em solid rgb (71, 194, 231);
poloha: relativní;
horní: -3em;
}
.diamond-cut: po {
obsah: '';
pozice: absolutní;
vlevo: -3em;
horní: 1,25 em;
šířka: 0;
výška: 0;
okraj: 3em pevný průhledný;
border-top: 4,4em solid rgb (71, 194, 231);
}

Výstup:

Srdce

Tvar srdce je trochu tvrdý, ale můžete to udělat pomocí ::před a ::po pseudoprvky. Můžete použít různé hodnoty přeměnit otáčet je z různých úhlů, dokud dokonale nevytvoří tvar srdce. Nakonec můžete nastavit transformovat-původ pro nastavení bodu, kolem kterého se transformace aplikuje.

HTML

CSS

.srdce {
šířka: 6,25em;
výška: 55 em;
poloha: relativní;
}
.srdce: předtím,
.srdce: po {
obsah: "";
šířka: 3em;
výška: 5 em;
pozice: absolutní;
vlevo: 3em;
nahoře: 0;
pozadí: červené;
border-radius: 3em 3em 0 0;
transformace: rotace(-45deg);
transformace-origin: 0 100 %;
}
.srdce: po {
vlevo: 0;
transformace: otočení (45 stupňů);
transformace-origin: 100 % 100 %;
}

Výstup:

Experimentujte s čistými tvary CSS

Nyní byste měli znát různé čisté obrázky CSS, které lze sestavit napsáním několika řádků kódu. Vytváření superrychlého webu už není hektický úkol, protože víte, jak si pohrát s kódem. Nejlepší na tom je, že můžete rezonovat s hlasem značky manipulací s různými tvary a barvami podle vašich požadavků. Proto pokračujte v experimentování a objevujte nové způsoby, jak kreslit úžasné tvary čistě pomocí CSS.

Jak vytvořit responzivní navigační panel pomocí HTML a CSS

Výzva pro všechny začínající webové vývojáře: tento tutoriál vám poskytne dovednosti, které potřebujete k vytvoření vlastních responzivních navigačních panelů pouze pomocí HTML a CSS!

Přečtěte si další

O autorovi