如何使用CSS将形状组合为一个云来创建云？

.cloud {
  width: 200px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
}

.cloud {
  /* ... */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background-color: #fff;
}

.cloud::before {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: -20px;
  left: 20px;
}

.cloud::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: -10px;
  right: 20px;
}

<div class="cloud"></div>