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

Question

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

-webkit-clip-path: 多边形(0% 0%, 100% 0%, 81% 100%, 0% 100%)

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

参见此处:http://prntscr.com/carv7k

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

Answer 1

截图链接打不开:/

无论如何，您可以使用 css 三 Angular 形方法在元素之前和之后使用:

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/