NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Insane Qurd
Tvůrce
Avatar
Insane Qurd:22.11.2016 18:10

Ahoj,

chtěl bych se zeptat jestli by někdo věděl, jak se dá nastylovat podobné menu:

Odpovědět
22.11.2016 18:10
It's impossible to say it's impossible.
Avatar
vojta3310
Člen
Avatar
vojta3310:22.11.2016 18:40

Ahoj,
nemám moc zkušeností, ale měl bych tři nápady:

  1. normální obdélníkovou vrstvu (div, nebo něco jiného) a jako pozadí nastavit obrázek s tím šikmým zlomem. (s měnícím se rozlišením to nemusí vypadat hezky)
  2. zase obdélníková vrstva s menu a s nastaveným overflow hidden a v ní bílá vrstva s vyšším z-index natočená pod úhlem. (bez alfa kanálu > neprůhledný bude celý obdélník)
  3. průhledná vrstva s owerflow hidden v ní pootočená černá vrstva a v té pootočené vrstva s menu, otočená zase tak aby byla rovně)

ještě jednou upozorňuji že s tím nemám zkušenost a je to jen nápad jak by to možná šlo a provedení nechám také na tobě. Pootočení uděláš asi takto: (někde jsem to viděl a vypůjčil si)

-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);

Snad ti to pomůže.

 
Nahoru Odpovědět
22.11.2016 18:40
Avatar
David Dostal
Tvůrce
Avatar
Odpovídá na Insane Qurd
David Dostal:22.11.2016 19:10

http://jsfiddle.net/xjxks5a0/
Tak nějak by to šlo udělat, snad je to z toho vidět :-) (Barva pozadí samozřejmě stejná - tady je to jen pro zřetelnost.)
K divu (nebo prostě kontejneru menu) přidáš pomocí ::after pseudoelement o stejné délce, správně ho napozicuješ a pomocí skew ho zešikmíš. Kdyby jsi ho místo toho rotoval, vyčuhovaly by rohy.

Editováno 22.11.2016 19:11
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
22.11.2016 19:10
Avatar
David Dostal
Tvůrce
Avatar
David Dostal:22.11.2016 19:12

Ještě obrázek...

 
Nahoru Odpovědět
22.11.2016 19:12
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na Insane Qurd
Neaktivní uživatel:23.11.2016 7:41

Možností je několik.

Postaru třeba nějak takhle:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>

<style>
html a{text-decoration:none}
nav{display:block;width:100%;margin:0;padding:10px 0 0 0}
nav ul{width:100%;padding:10px 16px 0 16px;margin:0;letter-spacing:2px}
nav a{color:white;font-weight:bold}
nav a:hover{text-decoration:underline}
.black{background-color:black}
.inline-list>li{display:inline-block;padding:0 5px;margin:0}
.menu-bottom{display:block;width:100%;height:80px;background-image:linear-gradient(to top left,#fff 50%,#000 50%);margin:0;padding:0}
</style>

</head>
<body>

<nav class="black">
  <ul class="inline-list">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li>
  </ul>
  <span class="menu-bottom"></span>
</nav>

</body>
</html>
Nahoru Odpovědět
23.11.2016 7:41
Neaktivní uživatelský účet
Avatar
Dominik Matoušek
Člen
Avatar
Dominik Matoušek:27.11.2016 11:33

Na zakřivení divu můžeš použít například toto:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
:-) :-) :-)
Editováno 27.11.2016 11:34
 
Nahoru Odpovědět
27.11.2016 11:33
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.