有谁知道如何使用 css3 在标题上创建双曲线？

【问题标题】：Does anyone know how to use css3 to create a double curve on the header?有谁知道如何使用 css3 在标题上创建双曲线？
【发布时间】：2014-12-04 04:31:25
【问题描述】：

我知道怎么用border-(bottom|top)-(left|right)-radius: XX; 有什么方法可以创建一条中途改变方向的曲线？

【问题讨论】：

你应该在 Paint 中绘制它并附上图像，这样你的意图就很清楚了。
看看stackoverflow.com/questions/11313593/…

标签： html css header styles

【解决方案1】：

像这样将一个<div> 覆盖在另一个之上怎么样：

<div class="outer">
    <div class="inner-bottom"></div>
    <div class="inner-top"></div>
</div>

CSS：

div.outer {
    position: relative;
}

div.inner-top {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: #ABC;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

div.inner-bottom {
    position: absolute;
    width: 200px;
    height: 80px;
    top: 10px;
    background-color: #ABC;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Fiddle

【讨论】：