Изогнутые края DIV в CSS

Я пытаюсь сделать эти углы / края изображения в css, но без результата:

Введите описание изображения здесь

Как я могу достичь этого в CSS?
Вот моя попытка, но я не могу достичь точной формы, которая в изображении.

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

3 ответа

    1. создание контейнера div
      • стиль CSS:overflow: hidden;
    2. создание 3 divs внутри контейнера 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. Используйте динамические измерения для калибровки и позиционирования,
      поэтому вы работаете с макетом в ответ : например: все основано на vw .

    вот пример скрипки. https://jsfiddle.net/warkentien2/mx11fh6b/2/
    это проще, если вы просто выполните шаги.

  1. Спасибо @warkentien2 решение в этой скрипке

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

    .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;
    }
    <div class="container">
      <div class="green">&nbsp;</div>
      <div class="rectangle black left">&nbsp;</div>
      <div class="rectangle grey right">&nbsp;</div>
    </div>

    Спасибо всем за помощь!