Home/ Questions/Q 7079521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:40:56+00:00

I’m looking for a bit of brainstorming assistance. I am coding a layout that

  • 0

I’m looking for a bit of brainstorming assistance.

I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.

I’ll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.

https://i.stack.imgur.com/P34yI.gif

So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc…

I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.

I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?

I’m not asking for code or for you to do my work for me 🙂 I’m just looking for ideas – just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.

Thanks!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming you’re using a ‘ul > li > a’ structure for the menu, I would use two angled backgrounds (right and left… the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I’ve added an additional 30px of padding on both sides to create the extra space around the text:

    li {
    margin-right: -27px;
    margin-left: -22px;
    padding-left: 52px;
    position: relative;
    background: url(leftcorner.jpg) left top no-repeat;
    background-color: #3aa1cc
}

li a {
    padding-right: 57px;
    background: url(rightcorner.jpg) right top
}

li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}

    I haven’t tested this but I think it should work… possibly with some additional tweaking.

    This solution doesn’t include the subtle inner shadow… to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.

    Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.

    • 0