clip-path在Safari/IE/Edge不生效，求跨浏览器兼容代码修改方案

我看了你的代码，核心问题在于CSS clip-path: polygon()的兼容性：

• Firefox/Chrome 对标准的clip-path支持良好，但旧版 Safari 需要添加-webkit-前缀，而 IE 和旧版 Edge 完全不支持 CSS clip-path的多边形语法，这就是为什么在这些浏览器里渲染异常的原因。

原代码回顾 #

CSS #

.frame { width: 200px; height: 300px; } 
.trapezoid-top, .trapezoid-left { background-image: url("https://image.ibb.co/dNUCFd/fragment.png"); background-size: contain; } 
.trapezoid-top { width: 200px; height: 40px; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%); transform-origin: top left; transform: rotate(0deg); } 
.trapezoid-left { width: 300px; height: 40px; margin-top: -40px; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 40px 100%); transform-origin: top left; transform: rotate(90deg) scale(1, -1); }

HTML #

<div class="frame"> 
  <div class="edge_top_left"> 
    <div class="trapezoid-top"></div> 
    <div class="trapezoid-left"></div> 
  </div> 
</div>

效果对比 #

预期效果 #

实际渲染问题（Safari/IE/Edge） #

全平台兼容修复方案 #

我推荐使用SVG实现，因为SVG在所有主流浏览器（包括IE9+）都有良好支持，能完美实现你要的梯形角效果，同时保留图片填充的需求。

修复后代码 #

HTML

<div class="frame">
  <div class="edge_top_left">
    <svg width="200" height="300" viewBox="0 0 200 300">
      <!-- 定义图片填充的图案 -->
      <defs>
        <pattern id="framePattern" patternUnits="userSpaceOnUse" width="200" height="40">
          <image href="https://image.ibb.co/dNUCFd/fragment.png" width="200" height="40" />
        </pattern>
      </defs>
      <!-- 顶部梯形 -->
      <polygon points="0,0 200,0 160,40 40,40" fill="url(#framePattern)" />
      <!-- 左侧梯形（通过旋转变换对齐） -->
      <polygon points="0,0 40,0 0,40 0,260" fill="url(#framePattern)" transform="rotate(-90) translate(-300, 0)" />
    </svg>
  </div>
</div>

CSS

.frame {
  width: 200px;
  height: 300px;
}
.edge_top_left svg {
  display: block;
  width: 100%;
  height: 100%;
}

方案优势 #

1. 兼容性强：支持IE9+、所有现代浏览器（包括Safari）；
2. 精度高：SVG的矢量特性保证形状不会失真；
3. 易维护：直接修改SVG的points属性就能调整梯形的尺寸，无需复杂的CSS计算。

如果你想继续用纯CSS方案（支持IE10+），也可以用transform: skew()替代clip-path，代码如下：

纯CSS兼容方案（IE10+） #

.frame {
  width: 200px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.trapezoid-top, .trapezoid-left {
  background-image: url("https://image.ibb.co/dNUCFd/fragment.png");
  background-size: cover;
  position: absolute;
}
.trapezoid-top {
  width: 200px;
  height: 40px;
  top: 0;
  left: 0;
}
.trapezoid-left {
  width: 80px;
  height: 300px;
  top: 0;
  left: -20px;
  transform: skewX(-45deg);
  transform-origin: top left;
  background-position: right top;
}

<div class="frame">
  <div class="edge_top_left">
    <div class="trapezoid-top"></div>
    <div class="trapezoid-left"></div>
  </div>
</div>

这个方案通过倾斜变换模拟梯形，利用父容器的overflow: hidden裁剪多余部分，兼容性比clip-path好很多。

内容的提问来源于stack exchange，提问作者David Smith