css3+html5怎么做出斜杠分层的效果？

Question

如何用css做出这样一条斜杠分成两边的效果

Answer 1

方法蛮多的，利用伪元素画出一个三角盖上去，或者transform倾斜变化，或者渐变色拼接。个人更喜欢用渐变，简单，兼容好
https://jsbin.com/tudalakosa/...,output

Answer 2

最简单的方法是使用clip-path，但是有兼容性问题。

https://codepen.io/hungtcs-th...

Answer 3

先画一个长方形的div，overflow: hidden; position: relative;
内部再画一个尺寸足够大的正方形div，倾斜

Answer 4

向右下方渐变

Answer 5

方案1，使用伪元素定位到左侧，然后用skew倾斜，我肉眼测量了一下，这个倾斜角度大概为-30deg左右，假设高度为70，通过计算得到这个倾斜的四方形应该往左移动21px即可刚好挡住左边的角（蒙的），只留下右边的角，点击这里获取代码，效果如下：

方案二，使用渐变，俗话说得好，没有渐变搞不定的样式，点击这里获取代码，效果如下：