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

Posted 2023-03-05

【中文标题】具有通用浏览器支持的 Clip-Path 的替代方案？

【英文标题】：Alternative to Clip-Path with universal browser support?

【发布时间】：2017-06-23 16:09:38

【问题描述】：

我在我的网站上使用了一些剪辑路径多边形形状来创建向下指向的内容框，您可以在主页上看到一些示例：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 技巧来制作具有更好跨浏览器支持的这些形状吗？

【问题讨论】：

谢谢，有没有什么替代方案可以产生这种效果，并且浏览器支持更好？尤其是 IE 和 Edge？

IE 不会剪切 html 元素，因此您需要在 SVG 中实现一些东西才能使用 SVG clipPath 剪切它们。

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

要么直接在SVG中绘制你想要的形状。

@RobertLongson 我似乎仍然无法让它工作。我将此页面顶部横幅下方的绿色块的背景设置为类名为 .style-svg 的 SVG 550.9f2.myftpupload.com/about/bob-stutman，那么下面的 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);

【参考方案1】：

这个问题最近遇到了问题，因为它没有得到解答。 2020 年，我们生活在一个clip-path 是almost universally supported 的世界。所以我认为可以肯定地说浏览器已经赶上并结案了！

【参考方案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;
    

/* 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;