如何剪辑 Div 以获得附加形状

Question

请任何人都知道如何使用剪辑路径或其他任何东西来剪辑 div 以获取所附图像中的绿色形状

我尝试过使用剪辑路径，但没有得到所需的结果。我做了类似下面的事情，但无法获得圆角，或者使其看起来与此图片完全相同

clip-path: polygon(
    50% 0%,
    68% 0,
    82% 19%,
    100% 44%,
    76% 70%,
    52% 97%,
    0 66%,
    0 52%,
    0 35%,
    0 0
  );

Answer 1

您可以使用 CSS 的

border-radius

和

transform

属性而不是

clip-path

来简化此操作。

这个例子会对你有帮助：

body {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  margin-top: -6rem;
  background: white;
  transform: rotate(-10deg);
}

.child-1 {
  position: absolute;
  width: 250px;
  height: 250px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 40px;
  transform: skewX(30deg);
  background: #00dd8c;
}

.child-2 {
  position: absolute;
  right: 80px;
  width: 120px;
  height: 220px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 30px;
  transform: skewX(30deg);
  background: #00dd8c;
}

<div class="parent">
  <div class="child-1">
  </div>

  <div class="child-2">
  </div>
</div>