Css 剪辑路径总是溢出：隐藏

我举了一个例子：

div{
-webkit剪辑路径：多边形（0,100%0,85%100,0%100%）；
剪辑路径：多边形（0,100%0,85%100,0%100%）；
背景色：红色；
宽度：150px；
高度：150像素；
位置：相对位置；
}
保险商实验室{
位置：绝对位置；
背景颜色：绿色；
左：30px；
顶部：50px；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

一个想法是使用背景复制相同的形状，避免剪辑路径的影响：

div{
背景：
线性渐变（至左上角，透明49%，红色50%）右侧/15%100%，
线性梯度（红色、红色）左/85%100%；
背景重复：无重复；
宽度：150px；
高度：150像素；
位置：相对位置；
}
保险商实验室{
位置：绝对位置；
背景颜色：绿色；
左：30px；
顶部：50px；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

您可以使用

：before

或

：after

伪元素：

div{position:relative}
div*{边距：0；框大小：边框框}
部门：之后{
内容：“；
位置：绝对位置；
-webkit剪辑路径：多边形（0,100%0,85%100,0%100%）；
剪辑路径：多边形（0,100%0,85%100,0%100%）；
背景色：红色；
宽度：150px；
高度：150像素；
}
保险商实验室{
位置：绝对位置；
背景颜色：绿色；
左：30px；
顶部：50px；
z指数：1；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

nice。。。。。如何使用图像更改红色？这与ie11兼容吗？@Michalis使用图像更新；）是的，它是兼容的。。它比剪辑路径更受支持，因为它依赖于背景