面试题：CSS3实现折角效果

今天做面试题的时候碰到一个实现折角效果的问题

参考资料：CSS3实现折角效果

这里她在做下述第3步的时候，我有些不太理解，不过自己也通过一些方法完成了功能，这里做个简单的记录，实验效果为：

主要步骤：

1-利用linear-gradient 实现一个剪角的盒子

2- 利用::before 补上一个折角的效果

3-利用translate把盒子和折角结合起来

目录

1.linear-gradient

2.::before伪类元素

3.transform:translate和rotate

4.box-shadow

---

1.linear-gradient