带有边缘的可扩展剪辑路径多边形

【问题标题】：Scalable clip-path polygon with Edge带有边缘的可扩展剪辑路径多边形
【发布时间】：2020-02-16 06:45:25
【问题描述】：

似乎 Edge 不处理剪辑路径多边形。如何使用 Edge 进行这项工作？

.background {
  background-color: grey;
}

.content {
  background: yellow;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 85%);
}

<div class="background">
  <div class="content">
    <h1>
      Content
    </h1>
  </div>
</div>

https://jsfiddle.net/topsu/79sx26yb/11/

【问题讨论】：

标签： css svg polygon clip-path

【解决方案1】：

用背景颜色替换它：

.background {
      background-color: grey;
}
.content {
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
 z-index:0;
}
.content:before {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 right:0;
 bottom:5%;  
 background: 
    linear-gradient(yellow,yellow)                           top   /100% 90%,
    linear-gradient(to top right,transparent 48%,yellow 50%) bottom/100% 10%;
 background-repeat:no-repeat;
}

<div class="background">
  <div class="content">
    <h1>
      Content
    </h1>
  </div>
</div>

【讨论】：

非常好！我一直在思考 svg 多边形混乱。