边框的特殊用法——平行四边形页签
利用边框制作不一样的效果图，整体样式如下：
这样的分页样式比普通的正方形好看很多，利用CSS也很容易实现。下面我用两种方法来实现这个效果。
第一种方法：
HTML代码
CSS样式
注意：使用这种方法会增加DOM树上的节点个数，我们可以采用内容生成的方法来实现。
第二种方法：
HTML代码：
CSS样式：
这两种方法也有小小的弊端——无法给平行四边形添加边框。上述方法中，我们使用了转换transform，聪明的你肯定也想到了可以两次使用倾斜函数skew()来实现边框的倾斜。使用倾斜函数的方法可以任意为平行四边形添加边框或背景色，但无法做出梯形的效果。所以这几种方法有利有弊。该效果的实现可能还有更优的方法，欢迎一起讨论；其中我也有不甚明了的地方，比如在第二种方法中利用伪元素选择器:before和:after添加的内容为何需要重新调整位置，望不吝赐教！
参考：用 CSS 实现三角形与平行四边形、纯CSS写三角形-border法
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！