使用 css3 创建正确的曲线答案

【问题标题】：Creating right curve using css3使用 css3 创建正确的曲线
【发布时间】：2018-03-09 21:55:57
【问题描述】：

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

我正在尝试这样的事情：

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

【问题讨论】：

标签： css

【解决方案1】：

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

https://jsfiddle.net/pf1no14x/

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

您仍然可以在.test 中放置一些内容，方法是使用position: absolute; 或大于.inner 的z-index 创建另一个元素。

【讨论】：

我可以对 x 行使用相同的设计而不影响设计吗？
如果我有 x 行，如何动态扩展高度？
当然可以。 Here's improved example。如果我的回答是完整的并回答了你的问题，你可以投票并标记为已接受，以表明该主题已结束并表示感谢。
非常感谢。
不客气！如果没有更好的答案，您也可以接受答案（绿色勾号）。