html - 凸台底部

Question

只是想知道是否可以在 css 中执行此操作：

http://puu.sh/2IS7n.png

我创建了当前测试站点的简化 jfiddle 版本：http: //jsfiddle.net/QhPQa/

HTML：

<header>
    Ight'sul
</header>

CSS：

body {

background: rgb(140,140,140);

}



header{
    height: 200px;
    width: 100%;
    text-align: center;
    vertical-align: top;
    font-size: 140px;
    color: black;
    background: rgb(201,201,201);

    -webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
}

任何人都知道这是否可能，或者我是否应该再次求助于图像。

Answer 1

您可以使用图像来实现该效果，但其中的乐趣在哪里？;)

JSFiddle

HTML

<h1 id="outer">
    <div id="inner">
        lgth'sul
    </div>
</h1>

CSS

#inner{
    height: 200px;
    width: 120%;
    position: relative;
    left: -10%;
    text-align: center;
    font-size: 140px;
    color: black;
    background: rgb(201,201,201);
    border-radius: 0 0 50% 50%;

    -webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 5px rgba(50, 50, 50, 0.75);
}

#outer {
    background-color: #3d3d3d;
    padding-bottom: 40px;
}

解释

这个想法是让outerdiv 充当曲线的背景，让innerdiv 充当曲线。

使用border-radius弯曲底部#inner

 border-radius: 0 0 50% 50%;

将 的宽度设置为#inner大于的值100%，以使曲率延伸到容器之外并定位它以确保对称。

 width: 120%;
 position: relative;
 left: -10%; /*Move back half of excess width*/

开始padding-bottom，#outer你就完成了。