这种倒斜边角用css渐变方法是怎么实现？

Question

如图，如何用css渐变方法来实现这样的倒斜边角

Answer 1

虽然理论上是可以，但挺麻烦的，建议用clip-path
这里给个渐变的demo，渐变麻烦点在于要自己算三条边的位置这些，所以我只是给个示意
https://jsbin.com/xepeposane/edit?html,output

Answer 2

建议使用 css 的 clip-path 或者 mask

或者直接使用 SVG 进行绘制。