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

Question

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/

Answer 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>

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

Scalable clip-path polygon with Edge

css

svg

polygon

clip-path