如何在css的矩形顶部制作曲线？只在最边缘

Question

我想创建以下形状：

重要提示：如果我使用“Border Radius”，我会得到这个（我不想要这个结果）：

Answer 1

这样的事情大致相同：

http://jsfiddle.net/ny4Q9/

的CSS：

.curvetop {
    position: relative;
    margin-top: 80px;
    background: red;
    width: 100%;
    height: 400px;
    z-index: 1;
}

.curvetop:after {
    top: -80px;
    display: block;
    position: absolute;
    content: '';
    border-radius: 50%;
    background: red;
    width: 100%;
    height: 170px;
}

标记：

<div class="curvetop"></div>

通过使用值为50％的border-radius，您可以创建一个圆圈...根据您的问题，您可以通过伪元素将其附加到另一个元素的顶部。

Answer 2

您可以使用边框半径

http://jsfiddle.net/wULyB/

<div id="out">
    <div id="in"></div>

</div>

CSS

#out{
    width: 100px;
    height: 100px;
    overflow: hidden;
    background: green;
    position: relative;
}
#in{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: black;
    position: absolute;
    left: -50px;
    top: 30px;
}

你可以玩这些数字，但你明白了

Answer 3

以下是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;
}