边框的特殊用法——平行四边形页签

利用边框制作不一样的效果图，整体样式如下：

这样的分页样式比普通的正方形好看很多，利用CSS也很容易实现。下面我用两种方法来实现这个效果。

第一种方法：

HTML代码

 

CSS样式

 

注意：使用这种方法会增加DOM树上的节点个数，我们可以采用内容生成的方法来实现。

第二种方法：

HTML代码：

CSS样式：

这两种方法也有小小的弊端——无法给平行四边形添加边框。上述方法中，我们使用了转换transform，聪明的你肯定也想到了可以两次使用倾斜函数skew()来实现边框的倾斜。使用倾斜函数的方法可以任意为平行四边形添加边框或背景色，但无法做出梯形的效果。所以这几种方法有利有弊。该效果的实现可能还有更优的方法，欢迎一起讨论；其中我也有不甚明了的地方，比如在第二种方法中利用伪元素选择器:before和:after添加的内容为何需要重新调整位置，望不吝赐教！

参考：用 CSS 实现三角形与平行四边形、纯CSS写三角形-border法