使用css3创建右曲线

Question

我想使用css创建如下图所示的曲线。

我正在尝试这样的事情：

.test {
background-color: #1d637d;
    color: #ffffff;
    border-right: 0 solid #cccccc;
    border-radius: 0px 60px 60px 10px/10px 200px 200px 0px;
}

Answer 1

我可以使用两个<div>和overflow: hidden;：

向您推荐此解决方案

https://jsfiddle.net/pf1no14x/

您可以根据需要操纵元素的大小和位置。

您仍然可以通过创建.test或position: absolute;大于z-index的其他元素在.inner内放置一些内容。