Základní tvary v CSS 3

HTML a CSS Profesionální webdesign Základní tvary v CSS 3

V tomto článku si předvedeme, jak lehce se dají vytvořit různé tvary čistě v CSS 3 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:

Dvanácticípá hvězda přes CSS 3

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:

Srdce přes CSS 3

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 ! :)

Pacman přes CSS

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


 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (18 hlasů) :
4.944454.944454.944454.944454.94445


 



 

 

Komentáře
Zobrazit starší komentáře (33)

Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Můžu se zeptat proč je u (u trojuhelníku) border-width ta 0?

 
Odpovědět 3.6.2015 21:39
Avatar
Odpovídá na vojtanosek
Michal Šmahel (ceskyDJ):

Je to zkrácené

border-width-top: 200px;
border-width-right: 100px;
border-width-bottom: 0;
border-width-left: 100px;

Používá se to stejně jako u ostatních (např. margin, padding).

border-width: nahoře vpravo dole vlevo;

Když nic neurčíš, píšeš nulu.

Odpovědět  +2 3.6.2015 22:01
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Už chápu. Musím si to někam zapsat.

 
Odpovědět  +1 4.6.2015 7:09
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:

Načítání:

#spinner {
  height: 100px;
  width: 100px;
  background-color: transparent;
  border-radius: 50%;
  border: 25px solid lightGrey;
  border-top-color: #00f;
  animation: spin 2s linear 0s infinite normal;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Vymyslel jsem tečkovaný, ale na jednom místě se kromě puntíků zvětšuje i mezera:

#waiter {
  height: 100px;
  width: 100px;
  background-color: transparent;
  border-radius: 50%;
  border: 25px dotted gray;
  border-top-width: 30px;
  animation: wait 2s linear 0s infinite normal;
}
@keyframes wait {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
Editováno 29. června 15:45
 
Odpovědět 29. června 15:43
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:

Takhle už ten tečkovaný funguje:

#waiter {
  height: 100px;
  width: 100px;
  background-color: transparent;
  border-radius: 50%;
  border: 20px dotted gray;
  border-top-width: 25px;
  animation: wait 2s linear 0s infinite normal;
}
@keyframes wait {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
Editováno 29. června 15:52
 
Odpovědět 29. června 15:50
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:

Ten první je z W3Schools.

 
Odpovědět 29. června 15:56
Avatar
krepsy3
Redaktor
Avatar
krepsy3:

Ahoj, nechytám se od trojúhelníků dál. Jak vypadá HTML? Chápu, že u čtverců či obdélníků stačí jeden div, který tímto způsobm ostyluju, ale pak už to nedávám - Např. nechápu větu

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.

A když jsem klikl na ten generátor, tak mi nedává ani HTML kód... :(

Odpovědět 27. září 15:07
Programátor je stroj k převodu kávy na kód.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na krepsy3
Honza Bittner:

HTML pro trojúhelník je právě jen jeden prázdný element s velikostí 0x0. :-)

Tzn. třeba

<div id="trojuhelnik"></div>
Odpovědět  +1 27. září 16:22
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Honza Bittner
krepsy3:

Jasně, už mi to došlo. Já si nevšim, že border-width je pro jednu stranu 0 ;)

Odpovědět 27. září 16:31
Programátor je stroj k převodu kávy na kód.
Avatar
jakoubek.stanislav:

Dobrá práce :-). Jen otázka (nejsem rejpal, fakt ...), ale co je to za hloupý a poměrně rozšířený zvyk nazývat obyčejný čtverec postavený na špičku kosočtvercem? :-P ;-)

 
Odpovědět 1. listopadu 10:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 43. Zobrazit vše