PHP týden Předvánoční slevová akce
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

Základní tvary v CSS 3

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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ářů :)


 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
20 hlasů
Student FIT ČVUT. In love with Dart & Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Předchozí článek
Online generátory CSS stylů pro moderní webmastery
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Tvoříme pohledný formulář (HTML a CSS)
Aktivity (1)

 

 

Komentáře

Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:11.6.2013 19:23

Tak poslední tvary by mě ani nenapadli že to půjde :O Pěkný :)

Odpovědět
11.6.2013 19:23
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Michal Žůrek - misaz:11.6.2013 19:48

Ty si prostě borec. :)

 
Odpovědět
11.6.2013 19:48
Avatar
martinkobelka
Redaktor
Avatar
martinkobelka:12.6.2013 20:49

Nebylo by lepší to kreslit do canvasu ?

 
Odpovědět
12.6.2013 20:49
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na martinkobelka
David Čápka:12.6.2013 20:55

Nebylo, proč zbytečně používat JS?

Odpovědět
12.6.2013 20:55
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
vasek
Neregistrovaný
Avatar
vasek:17.6.2013 3:32

Něco podobnýho jsem už viděl na jinejch zahraničních stránkách a těch tvarů bylo víc. Každopádně teď jsem i pochopil jak to funguje ;)

 
Odpovědět
17.6.2013 3:32
Avatar
IntroŠpek(tular
Neregistrovaný
Avatar
IntroŠpek(tular:20.6.2013 7:29

Zdravím
na čo sú tie prefixy (o, moz atď)?
Podľa w3schools.com už nie sú pri transform-och potrebné, jedine -webkit-

 
Odpovědět
20.6.2013 7:29
Avatar
Kit
Redaktor
Avatar
Odpovídá na IntroŠpek(tular
Kit:20.6.2013 8:53

Ty prefixy jsou určeny pro nestandardní atributy.

Odpovědět
20.6.2013 8:53
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
IntroŠpek(tular
Neregistrovaný
Avatar
Odpovídá na Kit
IntroŠpek(tular:20.6.2013 12:50

To chápem, ale načo uvádzať zbytočne všetky prefixy?
http://w3schools.com/…ansforms.asp

 
Odpovědět
20.6.2013 12:50
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na IntroŠpek(tular
David Čápka:20.6.2013 12:58

Protože když CSS 3 vznikalo, nebyla specifikace kompletní, proto si to každý prohlížeč udělal po svém. Teď se to sjednocuje a prefixy mizí. Třeba u toho transform jsou však stále potřeba.

Odpovědět
20.6.2013 12:58
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
IntroŠpek(tular
Neregistrovaný
Avatar
IntroŠpek(tular:20.6.2013 14:26

V prípade, že by som chcel dať do hviezdy nejaký text,
a nechcem, aby bol otočený v smere "najhornejšieho štvorca hviezdy", čo treba, aby patril celému vzniknutému útvaru? (čiže presne v strede celej hviezdy, aby nebol prekrytý žiadnou vrstvou)

 
Odpovědět
20.6.2013 14:26
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na IntroŠpek(tular
Honza Bittner:20.6.2013 14:28

zkus dát text do content v :before, hvězdu si ještě upravíš aby byl :before vodorovný, mělo by to fungovat :)

Odpovědět
20.6.2013 14:28
Student FIT ČVUT. In love with Dart &...
Avatar
IntroŠpek(tular
Neregistrovaný
Avatar
IntroŠpek(tular:20.6.2013 14:41

Keď to dám do :before, tak to nie je vidieť kvôli :after
Ale keď je to v :after, tak to funguje, ako má :)
Ďakujem za pomoc

 
Odpovědět
20.6.2013 14:41
Avatar
Snorlax
Redaktor
Avatar
Snorlax:21.6.2013 16:19

já CSS používám jen na pozicování, pozadí(obrázek/bar­va), zaoblení, stíny, rámečky,... prostě jen na takovýhle "prkotiny". žádný trojůjelníčky nedělám, mám-li se přiznat asi by mě jako první věc napadla obrázek a ne si jej napsat v CSS :D

Odpovědět
21.6.2013 16:19
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Snorlax
Honza Bittner:21.6.2013 17:37

tak ... né vždy jsou obrázky vhodné :)

Odpovědět
21.6.2013 17:37
Student FIT ČVUT. In love with Dart &...
Avatar
Snorlax
Redaktor
Avatar
Odpovídá na Honza Bittner
Snorlax:27.6.2013 14:10

to souhlasim. rozhodně se budou načítat déle než div s CSS. a taky by se museli pozicovat takže to CSS bych stejně musel využít... Ale jak řikám, já bych to stejně nevyužil.

Odpovědět
27.6.2013 14:10
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 15:24

Opravdu super článek, přesně nad tímto jsem nedávno přemýšlela, díky za návod!

 
Odpovědět
26.8.2013 15:24
Avatar
CzechJura
Člen
Avatar
CzechJura:10.10.2013 15:36

Skvěle

 
Odpovědět
10.10.2013 15:36
Avatar
Neaktivní uživatel:16.10.2013 16:39

HŮŮŮSTĚ!!!

přesně tohle sem potřeboval(kon­krétně ten lichoběžník) ale nevěřil bych že třeba ta hvězda jde takhle udělat.

Díky

Odpovědět
16.10.2013 16:39
Neaktivní uživatelský účet
Avatar
Šimon Raichl
Překladatel
Avatar
Šimon Raichl:18.8.2014 20:57

Tady je můj kód pro logo GM5

#GM
{
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background: #777777;
}
#GM:before
{
  content: "";
  position: absolute;
  height: 12px;
  width: 60px;
  background: white;
  margin: 44px 0px 0px 12px;
  border-radius: 4px;
}
#GM:after
{
  content: "";
  position: absolute;
  height: 48px;
  width: 12px;
  background: white;
  margin: 32px 0px 0px 62px;
  border-radius: 2px;
}
#GM:hover
{
  background: red;
}
#konec
{
  height: 0px;
  width: 12px;
  position: absolute;
  border-style: solid;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent white transparent;
  margin: -70px 0px 0px 50px;
  transform: rotate(-270deg);
}
 
Odpovědět
18.8.2014 20:57
Avatar
Šimon Raichl
Překladatel
Avatar
Šimon Raichl:3.9.2014 18:16

A tady ještě GM8 logo:

#logo
{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: black;
}
#logo:before
{
  border-radius: 15%;
  content: "";
  background-color: black;
  transform: rotate(49deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -42px 72px;
}
#logo:after
{
  border-radius: 15%;
  content: "";
  background-color: black;
  transform: rotate(-15deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -52px 84px;
}
#pokracovaniLoga
{
  border-radius: 15%;
  background-color: black;
  transform: rotate(109deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -256px 74px;
}
#pokracovaniLoga:before
{
  border-radius: 50%;
  content: "";
  background: #AEFF00;
  height: 150px;
  width: 150px;
  position: absolute;
  margin: 78px -36px;
}
#pokracovaniLoga:after
{
  border-radius: 50%;
  content: "";
  background-color: black;
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 102px -10px;
}
#gecko
{
  border-radius: 15%;
  background-color: black;
  transform: rotate(75deg);
  height: 120px;
  width: 28px;
  position: absolute;
  margin: -164px 110px;
}
#gecko:before
{
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 12px 50px 12px 0;
  border-color: transparent #AEFF00 transparent transparent;
  position: absolute;
  margin: 30px 8px;
  transform: rotate(-75deg);
}
#gecko:after
{
  content: "";
  border-radius: 35%;
  background-color: #AEFF00;
  transform: rotate(75deg);
  height: 32px;
  width: 16px;
  position: absolute;
  margin: 42px -8px;
}
Editováno 3.9.2014 18:17
 
Odpovědět
3.9.2014 18:16
Avatar
Odpovídá na Šimon Raichl
Neaktivní uživatel:3.9.2014 18:22

Asi tam trochu chybí HTML :)

Odpovědět
3.9.2014 18:22
Neaktivní uživatelský účet
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na Neaktivní uživatel
Šimon Raichl:3.9.2014 18:24

No jasně, ale já jsem dal jenom CSS zdroják, html

<div id = "logo"></div>
<div id = "pokracovaniLoga"></div>
<div id = "gecko"></div>
 
Odpovědět
3.9.2014 18:24
Avatar
Odpovídá na Šimon Raichl
Neaktivní uživatel:3.9.2014 18:55

Jo, to bude asi ten důvod, proč jsem ti psal, že tam chybí HTML :D

Odpovědět
3.9.2014 18:55
Neaktivní uživatelský účet
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na Neaktivní uživatel
Šimon Raichl:3.9.2014 18:59

No a? Každej si to umí napsat

 
Odpovědět
3.9.2014 18:59
Avatar
Odpovídá na Šimon Raichl
Neaktivní uživatel:3.9.2014 19:22

Kdo má zjišťovat, jestli ty elementy jsou v sobě, za sebou, či v jakém pořadí?

Odpovědět
3.9.2014 19:22
Neaktivní uživatelský účet
Avatar
Šimon Raichl
Překladatel
Avatar
Odpovídá na Neaktivní uživatel
Šimon Raichl:3.9.2014 19:31

Tak to napíše v pořadí, jak je napsáno v CSS

 
Odpovědět
3.9.2014 19:31
Avatar
Odpovídá na Šimon Raichl
Neaktivní uživatel:4.9.2014 8:00

Nechceš to pochopit, dobře. Nevadí :)

Odpovědět
4.9.2014 8:00
Neaktivní uživatelský účet
Avatar
vojtanosek
Člen
Avatar
vojtanosek:17.5.2015 21:35

Mazané! Jenom můžu se zeptat na co je tam da šířka třeba 4x? border-width:60px 60px 60px 60px?

 
Odpovědět
17.5.2015 21:35
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na vojtanosek
Honza Bittner:17.5.2015 21:37

To nastavuješ šířku rámečku pro top, right, bottom a left... :)

// kvůli přehlednosti to tam je 4x, tedy pro každou stranu vzlášť

Editováno 17.5.2015 21:38
Odpovědět
17.5.2015 21:37
Student FIT ČVUT. In love with Dart &...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:17.5.2015 21:40

Aha takže na čtyři třeba na čtyři strany šířku. Jinak divím se, že takový kosočtverec nebo hvězda má tak dlouhý kód.

 
Odpovědět
17.5.2015 21:40
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na vojtanosek
tomasmanhal:17.5.2015 21:43

Border nastavený pro každou stranu. Pokud složíš čtyři trojúhelníky do rovnoběžníku, tak poté jeden trojúhelník zneviditelníš, udělá Ti tu výseč a poté zaoblíš strany zbývajících trojúhelníků tak aby vznikl kruh.

Odpovědět
17.5.2015 21:43
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na vojtanosek
tomasmanhal:17.5.2015 21:43

To záleží z kolika se skládá elementů :-)

Odpovědět
17.5.2015 21:43
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:17.5.2015 21:50

Docela to tam prodlužují ty prefixy.

Přemýšlím, že je z článku odstraním a přidám poznámku, že si je musí každý přidat sám podle aktuálních potřeb, nebo lépe - pomocí autoprefixeru. :)

Odpovědět
17.5.2015 21:50
Student FIT ČVUT. In love with Dart &...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:3.6.2015 21:39

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:3.6.2015 22:01

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
3.6.2015 22:01
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:4.6.2015 7:09

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

 
Odpovědět
4.6.2015 7:09
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:29.6.2016 15:43

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.6.2016 15:45
 
Odpovědět
29.6.2016 15:43
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:29.6.2016 15:50

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.6.2016 15:52
 
Odpovědět
29.6.2016 15:50
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:29.6.2016 15:56

Ten první je z W3Schools.

 
Odpovědět
29.6.2016 15:56
Avatar
krepsy3
Redaktor
Avatar
krepsy3:27.9.2016 15:07

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.9.2016 15:07
Programátor je stroj k převodu kávy na kód.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na krepsy3
Honza Bittner:27.9.2016 16:22

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
27.9.2016 16:22
Student FIT ČVUT. In love with Dart &...
Avatar
krepsy3
Redaktor
Avatar
Odpovídá na Honza Bittner
krepsy3:27.9.2016 16:31

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

Odpovědět
27.9.2016 16:31
Programátor je stroj k převodu kávy na kód.
Avatar
jakoubek.stanislav:1.11.2016 10:16

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.11.2016 10:16
Avatar
Jiří Zeman
Člen
Avatar
Jiří Zeman:22.10.2018 18:06

Pacman i s okem.
Akorát by mě zajímalo, co je lepší použít u absolutního pozicování. top/left/rigt/bot­tom nebo margin?

.pacman {
position:absolute;
width: 0px;
height: 0px;
border-style: solid;
border-width: 60px;
border-color: #777777 transparent #777777 #777777;
border-radius: 50%;
}
.pacman:before{
content:"";
width: 0;
height: 0;
position:absolute;
border-radius:50%;
border-color:white;
border-style: solid;
border-width: 7px;
top:-45px;
left:-7px
}

Odpovědět
22.10.2018 18:06
Chybami se člověk učí.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Jiří Zeman
Honza Bittner:22.10.2018 18:21

Záleží. Asi bych šel do top/right/lef­t/bottom.

Odpovědět
22.10.2018 18:21
Student FIT ČVUT. In love with Dart &...
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 45 zpráv z 45.