Масштабируемый многоугольник клипа с Edge - PullRequest
Новая
       53

Масштабируемый многоугольник клипа с Edge

0 голосов
/ 19 октября 2019

Похоже, 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/

1 Ответ

2 голосов
/ 19 октября 2019

Замените его на фоновую окраску: 

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