6

This has already been asked, but I need it in a different way. Please have a look at the image below to see the nav bar I try to realize:

navigation

Problems:

  • Shadow around the edges
  • Text / Images inside the bar
  • 1px solid border around the figure would be great

Of course a static image could do this, but I would like to use something else. Do you have any ideas, how to do that (with as much browser support as possible)?

EDIT: <nav> is absolute positioned

Here is what I did so far

navbar progress

But it is not possible to apply a border and the fixed sizes are also problematic.

    nav {
       float: left;
       position: absolute;
       background-color: #ffffff;
       top: 0;
       left: 0;
       display: inline;
       padding: 12px;
       padding-right: 0;
       width: auto;
    }

    .behind_nav {
       height: 60px;
       width: 523px;
       position: absolute;
       top: 0;
       left: 0;
       border-right: 20px solid transparent;
       border-top: 48px solid white;
    }

.behind_nav is behind <nav> (surprise, surprise). Actually this works well except for the shadow and border problem stated above. Also it is bound to a fixed value, which is problematic. <nav> fits width to content (which might differ due to CMS data / browser)

1
  • The existing answer is already very good and it's also quite a long time since the question was asked but you could also have a look at this answer for a different approach (needs to be adapted to fit this question).
    – Harry
    Commented Jan 21, 2015 at 11:14

2 Answers 2

8

Rough demo: http://jsfiddle.net/W82UV/3/

enter image description here

I think this covers the crux of your difficulties, i.e. the edge skew, drop shadow, and border.

<div id="top">
    The top bar
</div>
<div id="container">
    <div id="background">        
    </div>
    <nav>
        Test
    </nav>
</div>

#top{  
    background-color: #f0f0f0;
    border-bottom: 1px solid #555;
    box-shadow: 8px 8px 8px #aaa;
}

#container {
    position: relative;
    top: -1px;
    overflow: hidden;
    height: 96px;
}

#background {
    background-color: #f0f0f0;

    position: absolute;
    top: -1px;
    left: -32px;
    border: 1px solid #555;

    width: 400px;
    height: 64px;
    box-shadow: 8px 8px 8px #aaa;

   -webkit-transform: skew(-20deg); 
   -moz-transform: skew(-20deg); 
   -o-transform: skew(-20deg);
   -ms-transform: skew(-20deg); 
   transform: skew(-20deg);
}

Tested in IE 8 (doesn't skew), 9, 10, FF, and Chrome. Note that I would probably rearrange the markup a little to be cleaner for the final solution (better class names and/or IDs), and position everything proportionately.

5
  • This is indeed a good solution and I also had some testing with this already, I just wanted to look for solutions that have more support than CSS3. Anyway I will mark this as solution if we won't find something else. Commented Mar 4, 2013 at 2:35
  • Oh... I forgot you could use skew ! Pretty crafty. Bluewhile, I don't think you'll get anything else that's not CSS3 or a static image. Best of luck anyway !
    – Orteil
    Commented Mar 4, 2013 at 2:37
  • Good suggestion on the -ms prefix (other prefixes might be missing too...just trying to get a rough solution working). With a few tweaks I think support is IE9+ and all other modern browsers.
    – Tim M.
    Commented Mar 4, 2013 at 2:39
  • IE8 is the only real problem here (and 7, if you want to support it). However, it doesn't look bad without the skew; just more "boxy".
    – Tim M.
    Commented Mar 4, 2013 at 2:42
  • 1
    Congrats on reaching 20K (almost!) and very nice solution!
    – Mog
    Commented Mar 4, 2013 at 2:48
1

Looks like a static image for the edges will be the only way (unless you want to get technical and use canvas but that would be silly). You could get the angled edge with a rotated block, but you'd run into problems with the shadow. The text inside the bar doesn't seem like it'd be a problem though - for reference, those nav bars are usually implemented as flat lists.

Sorry I couldn't be of more help !

2
  • What I could do is the edge as a separate image (with border and shadow included), but I would like to try something else if possible. Commented Mar 4, 2013 at 2:23
  • That's the price of backward compatibility... you can't show off your cool new toys to the deprived kids.
    – Orteil
    Commented Mar 4, 2013 at 2:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.