Question

我使用了一些剪辑路径多边形形状来在我的网站上创建向下指向的内容框，您可以在主页上看到一些示例：http://550.9f2.myftpupload.com/这就是CSS我＆＃ 39; m使用：

.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

但是我知道这并没有在Firefox中工作而没有一些修改（比如使用.svg URL？），即使这在IE和Edge中也不起作用。是否有一种替代的CSS技巧可以用来制作具有更好的跨浏览器支持的这些形状？

Answer 1

我遇到了这个问题，在http://mindcloak.com/vici/建立了这个网站。

我的方法是在这些浏览器上隐藏剪辑路径并使用css形状。

常规剪辑路径

.tri-green-left {
    width: 101%;
    height: 400px;
    position: absolute;
    z-index: 15;
    background: rgba(93,140,127,0.7);
    -webkit-clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
    clip-path: polygon(0 0, 5% 0, 25% 100%, 0 100%);
}

为不受支持的浏览器显示的css形状

/ * IE 10+造型材料* / @media all和（-ms-high-contrast：none），（ - ms-high-contrast：active）{

    #triangle-greenleft {
        width: 0;
        height: 0;
        margin-top: -50px;
        border-bottom: 900px solid rgba(93,140,127,0.7);
        border-right: 750px solid transparent;
        overflow: hidden;
    }

/ * Egde浏览器支持* / @supports（-ms-ime-align：auto）{

    #triangle-greenleft {
        width: 0;
        height: 0;
        border-bottom: 700px solid rgba(93,140,127,0.7);
        border-right: 200px solid transparent;
        overflow: hidden;
    }

Answer 2

这个问题最近由于没有得到解答而引起了轰动。在2020年，我们生活在clip-path为almost universally supported的世界中。所以我认为可以肯定地说浏览器已经赶上了，案件已经结案了！

具有通用浏览器支持的Clip-Path的替代方案？

2 个答案: