Css 带阴影的对角线背景

我试图在一个块上画一个对角线阴影，这就是我想要的：

用阴影和棍子画一个规则的块不是问题，以下是我现在所做的：

正文{
背景：EDF0F4；
}
.内容块{
位置：相对位置；
背景：白色；
填充：16px；
利润率：32px；
盒影：-7px 8px 16px 0 rgba（55,70,95,0.07）；
边界半径：8px；
高度：200px；
}
.内容块：在{
内容：''；
高度：70像素；
宽度：12px；
背景：线性梯度（332.97度，#54EFAD 0%，#23FCCA 100%，#1AFFD8 100%）；
位置：绝对位置；
右：0；
排名：0；
边框右上角半径：8px；
边框左下半径：8px；
}

您可以使用，但任何子内容也会被转换

不过，您可以将子内容向后倾斜到另一个方向

正文{
背景：EDF0F4；
}
.内容块{
位置：相对位置；
背景：白色；
填充：16px；
利润率：32px；
盒影：-7px 8px 16px 0 rgba（55,70,95,0.07）；
边界半径：8px；
高度：200px；
变换：skewX（-10度）；
}
.内容块：在{
内容：''；
高度：70像素；
宽度：12px；
背景：线性梯度（332.97度，#54EFAD 0%，#23FCCA 100%，#1AFFD8 100%）；
位置：绝对位置；
右：0；
排名：0；
边框右上角半径：8px；
边框左下半径：8px；
}
.内容块>*{
变换：斜交（10度）；
}

测试内容

测试内容

测试内容

测试内容

测试内容

< /代码> 可以考虑伪元素和阴影过滤器的歪斜：


正文{
背景：EDF0F4；
}
.内容块{
位置：相对位置；
背景：白色；
填充：16px；
余量：32px 100px 32px 32px；
过滤器：阴影（-7px 8px 16px红色）；
边界半径：8px 0 0 8px；
高度：200px；
}
.内容块：在{
内容：''；
位置：绝对位置；
宽度：100px；
排名：0；
底部：0；
左：100%；
背景：
/*模拟渐变半径的步骤*/
径向梯度（最远侧位于右上角，透明98%，#fff 100%）顶部62px右侧4px/8px 8px无重复，
/**/
线性梯度（332.97度，#54EFAD 0%，#23FCCA 100%，#1AFFD8 100%）右上角/12px 70px不重复，
#fff；
边界半径：0 8px 8px 0；
变换：倾斜（-20度）；
变换原点：顶部；
}
我的左边框应该保持笔直，对于内容来说，我可以用skewX制作一个孩子，这不是一个问题