如何在CSS中弯曲div

Question

我需要帮助一些我正在玩的CSS。 如何用css弯曲div来实现如下图所示的效果。 我需要弯曲的蓝色填充div。

Answer 1

使用两个div和CSS：

可以实现类似的效果

https://codepen.io/anon/pen/RgJQgN

#c {
  height: 110px;
  overflow: hidden;
}
#b {
  height: 150px;
  width: 150px;
  border: 30px solid blue;
  border-radius: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

<div id="c">
  <div id="b"></div>
</div>