CSS中的曲线DIV边缘

Question

我试图在css中创建这些图像角/边但没有结果：

如何在CSS中实现这一点？
这是我的尝试，但我无法达到图像中的确切形状。

＆＃13;

＆＃13;

div {
  background-color: black;
  width: 500px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 创建一个容器div
   • css：overflow: hidden;

2. 在容器div中创建3个div

   • 一个带有border-radius: 50%; z-index: 2; box-shadow: 0 0 10px black;
   的绿色矩形（盖子）
   • 一个左边的矩形
   • 一个正确的矩形
   • 对于所有矩形使用：position: relative;并重新定位它们。
     与left: [X]px, top: -[Y]px, float: left and float: right。

3. 使用动态测量进行尺寸调整和定位，因此您的布局会起作用： ex：all基于 vw < / EM>

这是一个小例子。 https://jsfiddle.net/warkentien2/mx11fh6b/2/如果你只是遵循这些步骤，那就更简单了。

Answer 2

这是一个简化版本。

div{
    background-color:black;
    width:500px;
    height:50px;
    border-radius: 50%/0 0 50px 50px;
}

http://jsfiddle.net/ECHWb/787/

Answer 3

感谢@ warkentien2这个小提琴的解决方案

https://jsfiddle.net/npqgjfbL/10/

＆＃13;

＆＃13;

.container {
  overflow: hidden;
}

.green {
  background-color: green;
  min-height: 150px;
  border-radius: 50%/0% 0 100px 100px;
  z-index: 2; 
  box-shadow: 0 0 10px black;
}

.rectangle {
  position: relative;
  top: -100px;
  width: 50%;
  height: 300px;
  z-index: -99999;
}

.left {
  float: left;
}

.black {
  background-color: black;
}

.grey {
  background-color: grey;
}

.right {
  float: right;
}

＆＃13;

<div class="container">
  <div class="green">&nbsp;</div>
  <div class="rectangle black left">&nbsp;</div>
  <div class="rectangle grey right">&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢大家的帮助！