3

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);
}

それが可能かどうか、または代わりに画像に頼るべきかどうかは誰でも知っています。

4

1 に答える 1

6

画像を使用してその効果を実現することもできますが、それのどこが楽しいのでしょうか?? ;)

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 を曲線として機能させることです。

境界半径を使用して、#inner 

 border-radius: 0 0 50% 50%;

の幅を#innerより大きい値に設定し100%て、曲率がコンテナーを超えて拡張し、対称になるように配置します。

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

オンpadding-bottomに#outerして完了です。

于 2013-04-28T17:57:18.620 に答える