如何在css中的矩形顶部制作曲线？仅在顶部边缘答案

【问题标题】：How to make a curve on a rectangle's top in css? only in top edge如何在css中的矩形顶部制作曲线？仅在顶部边缘
【发布时间】：2014-03-12 21:59:02
【问题描述】：

我想创建以下形状：

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

【问题讨论】：

使用边框半径，但要使边框半径足够大的方块看起来像一个圆

标签： css geometry curve css-shapes

【解决方案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，您可以创建一个圆圈。根据您的问题，您可以通过伪元素将其附加到另一个元素的顶部。

【讨论】：

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

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

【讨论】：

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

【讨论】：