你会如何在 CSS 中制作这个形状？

Question

为了在 CSS 中创建这个特殊的形状，我已经绞尽脑汁好几天了。我试过弄乱与这个相似的其他形状，但我就是无法得到这个确切的形状。 这是我一直试图创建的形状。

如有任何帮助，我们将不胜感激。

Answer 1

也许像这样使用伪元素：

.container {
  position: relative;
  margin: 20px;
  overflow: hidden;
  width: 340px;
}

.box {
  position: relative;
  border-right: 10px solid green;
  border-left: 10px solid green;
  height: 150px;
  width: 320px;
}

.container:before {
  content: " ";
  position: absolute;
  border: 10px solid green;
  width: 200%;
  height: 50px;
  top: -43px;
  left: -15px;
  border-radius: 37%;
  background: #fff;
  z-index: 9;
}

.container:after {
  content: " ";
  position: absolute;
  border: 10px solid green;
  width: 200%;
  height: 50px;
  bottom: -43px;
  left: -15px;
  border-radius: 37%;
  background: #fff;
  z-index: 9;
}

<div class="container">
  <div class="box">
  </div>
</div>

诀窍是用border-radius和伪元素的宽度来控制曲线。你可以玩这些值，你会看到结果（你可能还需要调整 top/left/bottom）

你会如何在 CSS 中制作这个形状？

How would you go about making this shape in CSS?

css

css-shapes