Question

我网站的一部分使用代码使用倾斜的边缘：

-webkit-clip-path：polygon（0％0％，100％0％，81％100％，0％100％）

这在Chrome中运行良好，但不适用于任何其他主流浏览器。

如何使用交叉兼容方法实现效果？我知道我可以使用png，但是用户可以更改div的颜色，这意味着它们必须是CSS。

Answer 1

屏幕截图的链接不起作用：/

无论如何你可以使用之前和之后在使用css三角形方法的元素之后：

div {
    background: red;
    position: relative;
    width: 200px;
    height: 100px;
}
div:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    border-top: 100px solid transparent;
    border-right: 20px solid red;
}
div:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    border-bottom: 100px solid transparent;
    border-left: 20px solid red;
}

演示：https://jsfiddle.net/0r3n9vev/

Answer 2

为了与其他浏览器兼容，请在已定义的规则之后添加其他CSS规则，但删除“-webkit-”。所以：

-webkit-clip-path: polygon(0% 0%, 100% 0%, 81% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 81% 100%, 0% 100%);

但请注意support for this feature is minimal和高度实验性（如果不是不存在的话）。

如何使所有跨浏览器兼容的倾斜div边缘？

2 个答案: