把border进行旋转：
border: 2px solid #FFF
-webkit-transform: rotate(204deg)
预览效果页面：
http://each.sinaapp.com/game/index.html
可以。用CSS可以做到。但是CSS3在IE9以下的浏览器支持不好。我写个例子，先看效果(火狐下)：
代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<link href="xxx/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
<title>CSS3 多边形</title>
</head>
<body>
<style type="text/css">
.pxsbx{ width: 100px height: 60px -webkit-transform: skew(-20deg) -moz-transform: skew(-20deg) -o-transform: skew(-20deg) background: #669margin-left:20px }
</style>
<div class="pxsbx"></div>
</body>
</html>
设置分割线在我多个的经验施行后，没有一成不变通用的方法，得根据要求采用最适合的。
1、使用字符“|”，适合导航栏间距不一致时，也就是不适合你。
2、采用背景方式，背景图片即是那条间隔线，需要形成jpg、gif、png格式的小图片，在背景里设置居左，并控制一下垂直位移，这样就会出现你第一张图的要求。
3、但最后一项可能会出现没有间隔线的情况，那么就多添加一个空的li或a，这样就多出来一个间隔线，好看。
具体细节需要把握，代码举例：
xlMenu a { background:url(menuLine.gif) no-repeat display:block width:77px text-align:center float:left}.xlMenu a.first { width:43px background:none text-align:left}
效果：
小图标：
很小很小的一条线。。。
