iPhone X造型上有个显著的特质，就是有个明显的刘海。然后，也出现了一些酷酷的交互。CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的

第一种方法使用 border 属性 hack 出三角形，并通过对三个元素进行拼接最终实现了平行四边形；而第二种方法则通过 transform: skew 来得到平行四边形。总体来说，第二种方法相对于第一种代码量小得多，而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。希望本文对各位有所帮助。