如何在CSS中在矩形的顶部制作一条曲线？仅在顶部边缘

Question

我想创建以下形状：

重要提示：如果我使用“边界半径”，我会得到这个（并且我不想要这个结果）：

Answer 1

这里有DEMO

HTML：

<div id="gray">
    <div id="red"></div>
</div>

CSS：

#gray{

  height: 100%;
  background-color: #ccc;
  overflow: hidden;  
}

#red{

  width: 150%;
  height: 150%;
  background-color: #f00;
  border-radius: 100%;
  top: 50%;
  left: -25%;
  right: 0;
  position: relative;
}