title: Cut a navigation bar with different colors (with CSS 2.1)
body: <p>Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:</p>
  
  <p><a href="https://i.stack.imgur.com/k4ioY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k4ioY.png" alt="enter image description here"></a></p>
  
  <p>Already two days I have been working on it, and could not find any way which will look the same look while zooming...</p>
  
  <p>EDIT:</p>
  
  <ul>
  <li><p>need to be done with <strong>CSS2.1</strong></p></li>
  <li><p>right and left borders are rounded + have shadow (right left correspondingly)</p></li>
  <li><p>there is a shadow on bottom as well</p></li>
  </ul>