先上一个简单的例子哈：
此时的方向向下。
如果想方向向上的话用：border-top:0;border-bottom:4px solid;
1. 0 height:0 border宽度，颜色和透明实现。 有例子。
http://www.igooda.cn/jzjl/20140401472.html
2. 还有一种利用图片。（效率没有纯css写的高，但是简单，推荐）
3. 利用一个小的文字图标。 这里边还有一个经典的absolute套absolute的例子。
4. 利用padding之类的。可以的话做一个梯形看看。
=========================================
<style type="text/css">
div{0px;/*宽度*/height:0px;/*高度*/ border:60px solid transparent; /*边框*/ /*background:#00cccc; 背景颜色*/}
.mysan{border-left-color:#00cccc;/*边框左颜色*/
border-top-color:#ff0000;/*边框上颜色*/
border-bottom-color:#990000;/*边框下颜色*/
border-right-color:#ccff00;/*边框右颜色*/}
.mysan1{border-left-color:#00cccc;/*边框左颜色*/}
.mysan2{border-top-color:#ff0000;/*边框上颜色*/}
.mysan3{border-bottom-color:#990000;/*边框下颜色*/}
.mysan4{border-right-color:#ccff00;/*边框右颜色*/}
</style>
</head>
<!--身体-->
<body>
<!--div 盒子模型 容器 可以设置高度 宽度 可以放置内容 层 属性=“属性值”-->
<div class="mysan"></div>
<div class="mysan1"></div>
<div class="mysan2"></div>
<div class="mysan3"></div>
<div class="mysan4"></div>
</body>
==================================================
<style type="text/css">
*{padding:0px; margin:0px;}
img{display:block;}
/*css表达方式： 属性：值; 宽度：300m; px 像素*/
#Nav{35px;/*宽*/ height:100%;/*高*/ background:#000;/*背景颜色*/
position:fixed;/*固定定位*/ right:100px; top:0px;}
#Nav .top{35px; height:150px; background:#d8002d; padding-top:70px; position:relative;/*相对定位*/}
#Nav .middle{35px; height:310px; }
#Nav .bottom{35px; height:110px; position:absolute;/*绝对定位*/ right:0px; bottom:0px;}
#Nav .top img.email{position:absolute;right:0px; bottom:0px;}
#Nav ul li{list-style-type:none;/*去掉圆点*/ font-family:"微软雅黑";
35px; font-size:12px; color:#fff;
text-align:center; position:relative;}
#Nav ul li span{90px; height:35px; background:#aaaaaa; display:block;
line-height:35px; position:absolute; top:0px;
left:-120px; opacity:0;/*left:-90px; opacity:1;*/ }
#Nav ul li span font{color:#aaaaaa;font-size:16px; font-family:"宋体";
position:absolute; right:-8px;top:1px;}
#Nav ul li.go{border-top:1px solid #aaa;/*粗细 风格 颜色*/
border-bottom:1px solid #aaa; padding-bottom:5px;}
#Nav ul li.hover{background:#ff0066;}
</style>
</head>
<body>
<!--div盒子模型，高度，宽度，放内容的长方形容器 姓名="清心"-->
<div id="Nav">
<!--上开始-->
<div class="top">
<img src="images/nhj.png"/>
<img src="images/email.gif" class="email"/>
</div>
<!--上结束-->
<!--中间开始-->
<div class="middle">
<ul>
<li><img src="images/logo.png" />
<span>我的特权<font>◆</font></span>
</li>
<li class="go"><img src="images/go.png" />购<br/>物<br/>车</li>
<li><img src="images/money.png" />
<span>我的资产<font>◆</font></span>
</li>
<li><img src="images/xin.png" />
<span>我关注的品牌<font>◆</font></span>
</li>
<li><img src="images/start.png" />
<span>我的收藏<font>◆</font></span>
</li>
<li><img src="images/see.png" />
<span>我看过的<font>◆</font></span>
</li>
</ul>
</div>
<!--中间结束-->
<!--下面开始-->
<div class="bottom">
<ul>
<li><img src="images/xin.png" />
<span>我关注的品牌<font>◆</font></span>
</li>
<li><img src="images/start.png" />
<span>我的收藏<font>◆</font></span>
</li>
<li><img src="images/see.png" />
<span>我看过的<font>◆</font></span>
</li>
</ul>
</div>
<!--下面结束-->
</div>
<!--引用外部 jqeury 类库-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#Nav ul li").hover(function(){
if($(this).hasClass("go")){
$(this).find("img").attr("src","images/go2.png");
}
$(this).addClass("hover"); // class="hover"
$(this).find("span").stop().animate({left:"-90px",opacity:1},500);
},function(){
if($(this).hasClass("go")){
$(this).find("img").attr("src","images/go.png");
}
$(this).removeClass("hover"); //移除 class='hover'
$(this).find("span").stop().animate({left:"-120px",opacity:0},500);
});
</script>