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

利用边框制作不一样的效果图，整体样式如下：
这样的分页样式比普通的正方形好看很多，利用CSS也很容易实现。下面我用两种方法来实现这个效果。
第一种方法：
HTML代码

文章插图
CSS样式
【边框的特殊用法——平行四边形页签】

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

文章插图
HTML代码：

文章插图
CSS样式：

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