Trying to recreate webOS style navigation in CSS3

[Joshua]

I’m trying to recreate the bottom app navigation bar that LG has in their WebOS for TV’s. For those of you that are not familiar with this, a picture of it is below.

Link: http://www.lgnewsroom.com/newsroom/download.php?p=L3Jlc291cmNlL3Bvc3QvNDEwNC9XRUJPU18xLmpwZw==&f=V0VCT1NfMS5qcGc=

I created a container which sits at the bottom of the screen and then created ten or so to be the “tiles.” I then used transforms to tilt these to the right, but this has more problems such as me having to add crazy heights to the divs and them shoving each other down the screen etc.

Can anyone think of a better way to go about this? The code I’ve tried is below (shortened).

  .navigation{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 250px;
background: red;
overflow: hidden;

.bar{
    width: 10%;
    height: 600px;
    background: blue;
    @include rotate(-45deg);
    position: relative;
    float: left;
}
  }


<section class="navigation">
    <div class="bar">

    </div>
    <div class="bar">

    </div>
    </section>

[Shikkediel]

Without seeing a pen or live link to have a good look, I can only say that I would probably start with a transform: skew(...deg) myself.

[Ilan Firsov]

Yep skew should work. Here is a quick starter for you:

http://codepen.io/ilanf/pen/ramzxe/

There is a lot to fix in here though

[Author]

Posts