Diskuze: Hexagon v CSS

HTML a CSS HTML a CSS Hexagon v CSS American English version English version

Avatar
Merry
Člen
Avatar
Merry:

Ahoj, potřeboval bych pomoct s vytvořením hexagonu jako tačítka ale i také jako ohraničení nějakého obsahu třeba.
Takže hexagon s pružnou šířkou.
zkoušel sem to dělat, ale vždy byl problém s tím že v IE a Chromu vypadaly prostě trosku jinak a chcu aby byly krásny hexagonu a všude stejny.
V příloze přikládám příklady jak by měl vypadat. ( jsou tam jak tlačítka tak i ohraničení. Je to možná špatně vidět ty ohraničení)
Nevíte jestli tohle už někdo řešil?
Díky

Odpovědět 12. ledna 9:55
Jste dobří jen v tom, co vás baví.
Avatar
vajkuba1234
Člen
Avatar
Odpovídá na Merry
vajkuba1234:

Zkus toto:

http://jsfiddle.net/veuc78af/
Nahoru Odpovědět 12. ledna 11:15
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Merry
Člen
Avatar
Odpovídá na vajkuba1234
Merry:

To jsem zkoušel ale nefunguje v Safari. :-(

Nahoru Odpovědět 12. ledna 11:16
Jste dobří jen v tom, co vás baví.
Avatar
vajkuba1234
Člen
Avatar
Nahoru Odpovědět 12. ledna 11:18
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Merry
Tomáš123:

Môžeš si vytvoriť dva obrázky, ktoré pridáš cez :before a :after alebo background-position (vyžaduje podporu viacerých pozadí, jedno z nich sa dá prípadne deklarovať u :before resp. :after) pred a za položku a položku naštýluješ tak, aby pasovala. Pre viac vzhľadov, teda dve farby tlačítok, budeš potrebovať štyri obrázky... S pseudotriedami podpora od IE8 (http://caniuse.com/#…).

Nahoru Odpovědět 12. ledna 16:28
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Ondřej Langr (andysekcze):

Udelas si obdelnik s barvou, pak k tomu pridas :before a :after. Ty otocis o 45º a napozicujes jak ti to bude vyhovovat :-)

Nahoru Odpovědět  +1 12. ledna 17:58
I have a charger. I have Note 7. Umh I haven't Note7.
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 6 zpráv z 6.