Как создать CSS вогнутых / выпуклых форм

Question

Я хочу создать два элемента с фоновой белой формой, изображенной ниже. Как вы можете видеть, это в основном прямоугольник и форму эллипса. Это должно быть в состоянии произвести коробку-тень.

Есть ли способ достичь этого только с помощью CSS?

Answer 1

Я использовал 2 div с box-shadow я добавил border для понимания

body {
  background:url(https://placeimg.com/640/480/any);
}

.out {
  width: 455px;
  height: 275px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  margin: 20px;
}

.in {
  width: 550px;
  height: 550px;
  border: 1px solid green;
  position: absolute;
  left: 200px;
  border-radius: 50%;
  box-shadow: 0 0 0 500px white; /* this is the white background */
}

.bottom .in {
  bottom: 0;
  left: 200px;
}

<div class="out">
  <div class="in">

  </div>
</div>

<div class="out bottom">
  <div class="in">

  </div>
</div>