你会如何在CSS中创建这个形状？

Question

我试图在CSS中创建这个特殊的形状已经让我头疼了好几天。我曾尝试弄乱其他类似于这个的形状，但我无法得到这个确切的形状。 这是我一直试图创建的形状。

任何帮助都将不胜感激。

Answer 1

使用伪元素可能是这样的：

＆＃13;

＆＃13;

try {
    AssetManager assetManager = getBaseContext().getAssets();
    InputStream is = assetManager.open("MAIN.sql");
} catch (IOException e) {
    e.printStackTrace();
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

诀窍是用border-radius和伪元素的宽度控制曲线。您可以使用这些值进行游戏，您将看到结果（您可能还需要调整顶部/左侧/底部）