如何用css做出这样一条斜杠分成两边的效果
方法蛮多的，利用伪元素画出一个三角盖上去，或者transform倾斜变化，或者渐变色拼接。个人更喜欢用渐变，简单，兼容好https://jsbin.com/tudalakosa/...,output
最简单的方法是使用clip-path，但是有兼容性问题。
https://codepen.io/hungtcs-th...
先画一个长方形的div，overflow: hidden; position: relative;内部再画一个尺寸足够大的正方形div，倾斜
向右下方渐变
方案1，使用伪元素定位到左侧，然后用skew倾斜，我肉眼测量了一下，这个倾斜角度大概为-30deg左右，假设高度为70，通过计算得到这个倾斜的四方形应该往左移动21px即可刚好挡住左边的角（蒙的），只留下右边的角，点击这里获取代码，效果如下：
方案二，使用渐变，俗话说得好，没有渐变搞不定的样式，点击这里获取代码，效果如下：
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（5）
方法蛮多的，利用伪元素画出一个三角盖上去，或者transform倾斜变化，或者渐变色拼接。个人更喜欢用渐变，简单，兼容好
https://jsbin.com/tudalakosa/...,output
最简单的方法是使用clip-path，但是有兼容性问题。
https://codepen.io/hungtcs-th...
先画一个长方形的div，overflow: hidden; position: relative;
内部再画一个尺寸足够大的正方形div，倾斜
向右下方渐变
方案1，使用伪元素定位到左侧，然后用skew倾斜，我肉眼测量了一下，这个倾斜角度大概为-30deg左右，假设高度为70，通过计算得到这个倾斜的四方形应该往左移动21px即可刚好挡住左边的角（蒙的），只留下右边的角，点击这里获取代码，效果如下：
方案二，使用渐变，俗话说得好，没有渐变搞不定的样式，点击这里获取代码，效果如下：
