Howto: Design leaf-like menu only using CSS and HTML

First a little screenshot of the final effect so you can quickly understand the purpose of this page. A live demo is available at the bottom of the page.

Preview

screenshot of the result in Firefox 4

Below are some details about the process to achieve the effects of leaf-like menu's items without images If you're used to development tools such as Firebug or Dragonfly, you probably don't need to read further.

HTML structure

        <ul class="branch">
          <li>
            <span class="vein top-right"></span>
            <span class="vein bottom-left"></span>
            <a href="">Lorem</a>
          </li>
          <li>
            <span class="vein top-right"></span>
            <span class="vein bottom-left"></span>
            <a href="">Ipsum</a>
          </li>
        </ul> 
        ul#branch li {
          background: none repeat scroll 0 0 #88BA00;
          border-radius: 2.5em 0;
          box-shadow: 3px 3px 5px #666;

          display: inline-block;
          padding: 0.5em;
          position: relative;
        }

Leaf-shaped Items

Shaping the menu's entry is achieve with: 
        border-radius: 2.5em 0;

Hover Effect

        ul#branch li:hover { background-color: #9BD002; }

Text Effects

        ul#branch li a {
          text-decoration: none;
          color: #fff;
          font-weight: bold;
          text-shadow: 1px 1px 1px #333;

          display: inline-block;
          padding: 0.5em 0.25em;
          position: relative;
          z-index: 20;
        }

Veins have Upper and Lower Parts

The vein on the leaves are achieve with the two <span>, hence the height and with of 50%. One is placed at the bottom-left of the item box, the other one at the top-right corner, hence the absolute positioning.

        ul#branch li .vein {
          border-radius: 100% 0;
          border: 2px hidden #6D9A00;
          border-left-color: transparent;
          border-right-color: transparent;

          height: 50%;
          width: 50%;
          z-index: 10;
          position: absolute;
        }

Upper vs. Lower Part's Appareance

      ul#branch li /*.vein*/ .top-right {
        border-bottom-color: transparent;
        border-top-style: ridge;
        border-top-style: groove;

        right: 0;
        top: 0;
      }
      ul#branch li /*.vein*/ .bottom-left {
        border-top-color: transparent;
        border-bottom-style: groove;
        border-bottom-style: ridge;

        bottom: 0;
        left: 0;
      }

Slicing Effect

The thinning of the vein toward the center of the leaf is obtained using a border-style: hidden; on the vein. Later on the document the border style is overriden to display only the right border.

So first we use an hiding style for all borders:

        border: 2px hidden #6D9A00;
Then for each half-vein, we change the style to something visible (e.g. groove):

        border-bottom-style: groove;
        border-bottom-style: ridge;

Live Demo