Home/ Questions/Q 8338713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T04:40:48+00:00

I’ve been experimenting with making a HTML/CSS navigation bar with chevron-shaped list items. I’ve

  • 0

I’ve been experimenting with making a HTML/CSS navigation bar with chevron-shaped list items. I’ve made my code available here: https://github.com/twslankard/css-chevron-bar/blob/master/index.html

Since my question is fairly specific, I’m offering up the code as public domain in the off chance that one of you CSS wizards will help me. 🙂

Now for my question. I’ve been trying to design the bar so that it scales properly, e.g. when someone modifies the font-size property of ul.chevronbar li or when the user hits Control+ or Control- in the browser.

I tried using two different CSS resets, both Eric Meyers Reset CSS 2.0 and YUI 3. However, in Firefox the scaling/zooming “mostly” works, and in Chrome it does not work (especially when zooming in). If possible, I’d like some advice on how to get this to work better in Chrome.

Here’s an image illustrating the issue. Your help is greatly appreciated.

enter image description here

EDIT: this is what I ended up with eventually. Pardon the messy CSS. I’ll get around to cleaning it up later.

https://github.com/twslankard/css-chevron-bar-2

EDIT 2: Another person generously provided their solution to this problem here: http://jsfiddle.net/pXBTK/3/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Effectively, the trick is how to make the height of the pointy parts match the height of the menu item it follows, thus avoiding the jagged look.

    I am guessing that something like this causes the problem:

    • Calculated menu item height is 5 physical screen pixels
    • Each of the top and bottom borders that produce the arrow must be 50% of 5
    • Since you cannot display a half pixel, both round off, say to 3 pixels
    • Add together and the arrow becomes 6 pixels tall but menu item is only 5

    It seems clear then that the fix is to simply hide the overflow as stated. The only change really necessary to the original is:

    ul.chevronbar {
  ...
  overflow: hidden; /* Add this line */
}

    It would also need resizing to get closer to the original look, but works without that. Fixed height is not actually necessary.

    This simplified example illustrates the arrow concept with highlighting for parts of the arrow:

    <head><style type="text/css">
ul {
  background-color: lightgray;
  font-size: xx-large;
  overflow: hidden;
  position: relative;
}
li {
  display: inline-block;
  background-color: gray;
  margin-right: 1.5em;
}
li:after {
  content: '';
  border: 0.85em solid blue;
  border-left-color: red;
  border-right-color: red;
  height: 0;
  position: absolute;
  top: -0.2em;
}
</style></head>
<body><ul>
  <li>Lorem Ipsum</li> <li>Foobar</li>
</ul></body>
    • 0