html - 使 svg 的一侧变圆

Question

我想让我的 svg 的一侧变圆。

我在下面有 svg，我想对这部分进行四舍五入：

我怎样才能做到这一点？

我的 svg 大小必须是其容器的 100%。

.wrapper {
  width: 100%;
  height: 500px;
}

svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: black;
}

<div class="wrapper">
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="10,0 40,0 40,100 10,80"/>
  </svg>
</div>

标签： htmlcsssvg

Answer 1

带有边界半径的倾斜变换可以很容易地做到这一点：

.wrapper {
  height: 500px;
  position:relative;
  overflow:auto;
  margin:20px;
}
.wrapper:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform-origin:right;
  transform:skewY(10deg);
  background:black;
  border-bottom-left-radius:50px;
}

<div class="wrapper">

</div>