ie11 完全不支持 clip-path，包括 @supports 检测和 -ms- 前缀均无效；应改用内联 svg mask 实现兼容方案，注意 viewbox 匹配、像素单位及 position/transform 触发渲染。

IE11 完全不支持 clip-path，连语法解析都不做，整条 CSS 规则会被静默丢弃——不是“没效果”，是压根没读。

为什么 @supports 或 -ms- 前缀都无效

@supports (clip-path: polygon(0 0)) 在 IE11 中本身无法解析，整条 @supports 块被跳过；-ms-clip-path 不是标准前缀，IE11 从未实现过该属性，加了也白加。

用 SVG 替代 clip-path 的实操写法

这是最轻量、零额外请求、兼容 IE11 的方案，核心是用内联 <mask></mask> 描述形状，并通过 mask 属性引用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在按钮或容器外层加一个 <div class="clip-wrapper">，设 <code>position: relative
• 在该 <div> 内插入内联 SVG，<code><mask id="bottom-cut-mask"></mask> 必须显式声明 viewBox="0 0 [宽] [高]"，且宽高需匹配目标元素初始尺寸（如 viewBox="0 0 200 60"）
• <mask></mask> 内用 <rect></rect> 或 <polygon></polygon> 描绘“保留区域”，坐标单位为像素，注意：它定义的是“显示什么”，不是“裁掉什么”
• 目标元素加样式：mask: url(#bottom-cut-mask);（注意是 mask，不是 clip-path）
• ID 名必须合法：不能含点号（.）、斜杠（/）、空格，推荐用短横线或下划线，如 #bottom_cut_mask

避免 mask 失效的三个关键细节

即使 SVG 正确内联，以下情况仍会导致遮罩完全不生效：

• 父容器未设 position: relative 或 transform: translateZ(0) → IE11 和旧 Edge 会忽略 mask 作用域
• <img> 直接套 mask + object-fit: cover → 图像缩放后坐标系错乱，切口漂移；应改用 background-image + background-size 配合 mask
• <mask></mask> 中用了百分比单位（如 x="50%"）→ IE11 只认像素值，必须换算成绝对数值

什么时候该放弃 mask 改用 border-radius 或伪元素

如果只是圆角、半圆、三角箭头这类简单形状，别硬上 mask：

• 圆形头像：border-radius: 50%，IE9+ 全支持，性能无负担
• 对话气泡底部小三角：::after 用 border 技巧生成，零 JS、零 SVG、零兼容风险
• 星级评分半星：clip-path: inset(0 50% 0 0) 虽然 IE11 不支持，但可用两个重叠 <span></span>，用 overflow: hidden + width: 50% 模拟，更稳

真正难处理的是动态宽高的响应式元素——SVG 的 viewBox 是静态的，一旦容器尺寸变化，切角位置就会偏移。这时候要么固定宽高，要么用 JS 动态重写 viewBox，没有纯 CSS 解法。