用CSS3实现平行四边形的分页／导航

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

如果觉得首位宽度过大可以调整伪类的位置。