有什么可以在所有浏览器上都支持的替代Clip-Path的方法吗？

Question

我在我的网站上使用了一些clip-path多边形形状来创建向下指向的内容框，您可以在此处的主页上看到一些示例：http://550.9f2.myftpupload.com/，我正在使用以下CSS：

.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);
}

但是我知道如果不进行一些修改（例如使用.svg URL？），在Firefox中这种方法不起作用，而且即使这样，在IE和Edge中也不起作用。有没有其他可用的CSS技巧可以用来创建这些形状，并具有更好的跨浏览器支持？

- AndrewCoCo

---

谢谢，您有什么替代方案建议可以产生更好的浏览器支持效果吗？特别是IE和Edge？ - AndrewCoCo

IE不会剪切HTML元素，因此您需要使用SVG来实现剪切，通过SVG的clipPath来进行剪切。 - Robert Longson

这是否意味着我需要将背景设置为一个实心的SVG矩形，然后才能对该SVG应用剪辑路径？ - AndrewCoCo

要么直接在SVG中绘制所需的形状。 - Robert Longson

@RobertLongson 我似乎仍然无法让它工作。我将此页面上方横幅下面的绿色块的背景制成了SVG http://550.9f2.myftpupload.com/about/bob-stutman/，并使用类名.style-svg，那么下面的CSS不应该起作用吗？ code .style-svg { -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); } - AndrewCoCo

Answer 1

这个问题最近因为没有答案而被提起。在2020年，我们生活在一个几乎普遍支持clip-path的世界中。因此，我认为可以放心地说浏览器已经赶上了，这个问题已经解决了！

- Benjamin

Answer 2

我在构建这个网站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 and (-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;
    }

/* Edge 浏览器支持 */ @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;
    }

- Chris C