带有弯曲边的矩形[关闭]答案

【问题标题】：Rectangle with curved sides [closed]带有弯曲边的矩形[关闭]
【发布时间】：2015-05-05 19:35:39
【问题描述】：

如何通过简单的带有 css 的 DIV 来实现这一点？

HTML：

<div class="curv">
    <div class="holder"></div>
</div>

CSS：

.curv{
    width: 800px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}
.curv:before{
    background: #333;
    width: 100%;
    height: 200px;
    left: 0px;
    right: 0px;
    top: 0px;
    content: '';
    position: absolute;
    border-radius: 100% 100% 0 0;
}
.holder{
    width: 100%;
    height: 200px;
    background: #333;
    position: relative;
    z-index: 9999;
}

我现在得到的是： https://jsfiddle.net/debraj/fnL3wzrn/

我想让角落看起来是锋利的边缘而不是光滑的。所以它看起来像这样：

【问题讨论】：

@JoshCrozier 更新了问题。希望这比以前描述得更好。如果您认为好，请您投票。谢谢

标签： css css-shapes

【解决方案1】：

请检查更新的代码

.curv{
    width: 800px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
    overflow: hidden;
}
.curv:before{
    background: #333;
    height: 200px;
    left: -20px;
    right: -20px;
    top: 10px;
    content: '';
    position: absolute;
    border-radius: 100% 100% 0 0;
}
.holder{
     height: 200px;
    background: #333;
    position: relative;
    z-index: 9999;
}

<div class="curv">
    <div class="holder"></div>
</div>

【讨论】：

我知道上面的css。我希望角落更锋利。不圆。只有上边需要弯曲。
你现在可以看到了。我刚刚更新了
感谢 kumar ，这正是我想要的。