<ul>
  <li><a href="#"><span>1</span></a></li>
  <li><a href="#"><span>2</span></a></li>
  <li><a href="#"><span>3</span></a></li>
  <li><a href="#"><span>4</span></a></li>
</ul>

<style type="text/css">
  *{margin:0;padding:0;}
  ul{ margin:50px; list-style:none; font-size:12px; line-height:30px;}
  li{ margin:0 -10px; float:left; }
  a{
    display:block; width:80px; color:#FFF;
    border-left:30px dotted transparent;
    border-right:30px dotted transparent;
    border-bottom:30px solid #900;
    text-decoration:none;
    text-align:center;
  }
  a:hover{ position:relative; border-bottom-color:#F30;cursor:hand;}
  span{ position:absolute;}
</style>

?

示例图：

?