如何创建css凹/凸形状答案

【问题标题】：how to create css concave/convex shapes如何创建css凹/凸形状
【发布时间】：2016-10-21 15:22:03
【问题描述】：

我想创建两个具有如下所示背景白色形状的 div。正如你所看到的，它基本上是一个矩形和一个椭圆形。它应该能够产生一个盒子阴影。

有没有办法只用 css 来实现这一点？

【问题讨论】：

您尝试过什么吗？如果可以，您可以发布您尝试过的代码，看看您是否接近并且只是遗漏了一些东西？

【解决方案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>

【讨论】：

太棒了！这正是我想要的！你能帮我澄清一下“in”div是如何将圆形切割出来的吗？
我使用了box-shadow，它给出了效果