Základní tvary v CSS3

V tomto článku si předvedeme, jak lehce se dají vytvořit různé tvary čistě v CSS3 bez použití obrázků!

Jednoduché tvary

Obdélník a čtverec

Obdélník je asi nejsnadnější. Jednoduše vytvoříme div s určitou výškou a šířkou a následně jej obarvíme.

#obdelnik
{
   width: 200px;
   height: 100px;
   background: #777777;
}

Ukázka:

Čtverec je pochopitelně obdélník se stejnou šířkou a výškou.

Ovál a kruh

Na ovál budeme potřebovat znát border-radius, který nám zakulacuje rohy. Když však dáme zaoblení větší než 50%, vytvoříme ovál.

#oval
{
   width: 100px;
   height: 150px;
   background: #777777;
   border-radius: 50%;
}

Ukázka:

Kruh opět vytvoříme jako ovál se stejnou výškou a šířkou.

Trojúhelník

Trojúhelník se vytváří přes rámeček. Vytvoříte vlastně čtyři trojúhelníky a ty si pak upravujete. Každá hodnota je těžnice strany, tzn. ze středu strany do protějšího vrcholu. Šířka a výška trojúhelníku musí být na nule, jinak se nám ve středu vytvoří čtverec či obdélník.

Generátor trojúhelníků je například na stránce http://apps.eky.hk/…e-generator/

#trojuhelnik {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 200px 100px 0 100px;
   border-color: #777777 transparent transparent transparent;
}

Ukázka:

Lichoběžník

Lichoběžník je vytvořen podobně jako trojúhelník s tím rozdílem, že zadáme šířku.

#lichobeznik {
   height: 0;
   width: 150px;
   border-style: solid;
   border-width: 0 100px 100px 100px;
   border-color: transparent transparent #777777 transparent;
}

Ukázka:

Kosočtverec

Kosočtverec si vytvoříme jako čtverec a následně ho pootočíme od 45° a to transformací.

Transform: rotate(); potřebuje také vendor prefix !

#kosoctverec {
   height: 100px;
   width: 100px;
   margin-top: 25px;
   background: #777777;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

Ukázka:

Rovnoběžník

Na rovnoběžník použijeme opět transform, nyní však skew, za který dáme do závorky úhel. Nezapomeňte na vendor prefix !!

#rovnobeznik
{
    width: 200px;
    height: 100px;
    background: #777777;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}

Ukázka:

Složitější tvary

Nyní bude trochu větší zábava! Přejdeme z lehkých tvarů na ty složitější a postupně si ukážeme jak každý vytvořit.

Dvanácticípá hvězda

Ptáte se jak udělat dvanácticípou hvězdu? ... Vždyť v CSS existují jen tvary se čtyřmi rohy! Tak koukejte!

Nejdříve si vytvoříme čtverec kterému dáme absolutní pozici.

#hvezda
{
    width: 100px;
    height: 100px;
    background: #777777;
    position: absolute;
}

A nyní přidáme další čtverec. Jak? ... No mohli bychom přidat další div, ale my jsme chytří, proto využijeme toho, že můžeme napsat #hvezda:before. Vytvoříme si tedy další absolutně pozicovaný čtverec, který pootočíme o 30°. Čtverec si obarvíme zatím na červeno, abychom věděli, co nám to udělalo.

#hvezda:before
{
   content: "";
   position: absolute;
   width: 100px;
   height: 100px;
   background: red;
   -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}

Nádhera, už jsme skoro hotoví. Nyní uděláme to samé s #hvezda:after a pootočíme o -30°. Pro zkoušku si ho obarvíme na zeleno.

No super! Máme dvanácticípou hvězdu. Celkový kód vypadá nějak takto:

#hvezda
{
    width: 100px;
    height: 100px;
    background: #777777;
    position: absolute;
}
#hvezda:before
{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #777777;
    -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#hvezda:after
{
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: #777777;
    -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}

Ukázka:

Nezapomeňte na content: "";, jinak se vám nic nevytvoří. Obdobným způsobem můžeme (pomocí dvou trojúhelníků) vytvořit šesticípou hvězdu, zkuste si to!

Srdce

Chvilku si sedneme a zapřemýšlíme jak vytvořit srdce. Zjistíme, že se dá vytvořit pomocí jednoho čtverce a dvou kruhů. Jdeme tedy na to !

Nejdříve si vytvoříme čtverec s absolutní pozicí, pootočený o 45°.

#srdce
{
    margin-top: 25px;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

Potom si vytvoříme zase pomocí :after a :before 2 kruhy (stejná šířka a výška jako čtverec), které si pro lepší viditelnost obarvíme na červenou a modrou. Kruh bude mít také absolutní pozici. No jo, ale my máme kosočtverec a v něm modrý kruh.

Na ostatní nám poslouží margin! Nejdůležitější je však nezapomenout na to, že máme čtverec pootočený směrem doleva o 45°, tudíž si musíme hlavu trochu pootočit aby byl v rovině s čtvercem a potom vymyslet jak ho posuneme

Marginem pak kruhy posuneme o 30px (polovina velikosti) nahoru a dolů.

Celkový výsledek bude vypadat takto :

#srdce
{
    margin-top: 25px;
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#srdce:before
{
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    border-radius: 50%;
    margin: -30px 0 0 0;
}
#srdce:after
{
    content: "";
    position: absolute;
    height: 60px;
    width: 60px;
    background: #777777;
    border-radius: 50%;
    margin: 0px 0 0 30px;
}

Ukázka:

Pacman

Jako posledního si uděláme Pacmana! ... super co ? Jak na to ? ... a co třeba přes trojúhelníky, kde část pusy bude zneviditelněná. Také zaoblíme rohy do kruhu.

Jednoduché že? Pro ty, kdo by se ještě nechytali, zde přikládám kód:

#pacman {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 60px 60px 60px 60px;
  border-color: #777777 transparent #777777 #777777;
  border-radius: 50%;
}

Kdo bude mít chuť tak vytvoří pomocí :before také oko !

Zkoušejte vymyslet nové tvary ! Můžete nám poslat nějaké povedené dolu do komentářů