Paste_Image.png
看到这种需求，此前第一反应是用伪类，一个四边形加两个三角形(具体怎么做相信网上有很多文章，这里就不说了)。近期看到一篇文章，发现用transform来实现比较简单。
<div class="city">上海</div>
首先给div加上样式
.city{
color:#333;
position:relative;
padding:5px 20px;
display:inline-block;
border:1px solid #44a5fc;
transform:skew(-30deg);
}
得到下图：
Paste_Image.png
连文字也一起旋转了，不是我们要的效果，所以我们要把文字的旋转效果给取消，怎么取消呢？很简单，给文字再套一个div逆旋转就行了。代码如下：
<div class="city"><div>上海</div></div>
.city{
color:#333;
position:relative;
padding:5px 20px;
display:inline-block;
border:1px solid #44a5fc;
transform:skew(-30deg);
}
.city>div{
transform:skew(30deg)
}
得到效果如下：
Paste_Image.png
导航首尾我们可以用伪类来遮挡(具体过程就略过了)。完整代码如下：
<div class="city"><div>上海</div></div>
<div class="city"><div>上海</div></div>
<div class="city"><div>上海</div></div>
<div class="city"><div>上海</div></div>
.city{
color:#333;
position:relative;
padding:5px 20px;
display:inline-block;
border:1px solid #44a5fc;
transform:skew(-30deg);
}
.city>div{
transform:skew(30deg)
}
.city:first-child:before,.city:last-child:before{
position: absolute;
content: '';
width: 20px;
height: 26px;
left: -9px;
top:-1px;
border:1px solid #44a5fc;
border-right:none;
transform: skew(30deg);
background: #fff
}
.city:last-child:before{
left:63px;
border-left:none;
border-right:1px solid #44a5fc;
}
效果如下：
Paste_Image.png
如果觉得首位宽度过大可以调整伪类的位置。
