如图，div+css这样的导航应该怎么实现？

Answer 1

.par div
{
width:50px;
height:20px;
display:inline-block;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
border:1px solid white;
background:#dddddd;
}
<div class="par"><div></div><div></div></div>
大小自己调
如果还要曲线的感觉就加个 border-radius 看自己需要调下参数

Answer 2

通常这种复杂分割.建议使用整一条背景图.然后分割文字的点击区域
如果是要做点击和切换效果的话....那只能做成斜长方形了....带这样曲线角度的不好写