だから私はサイトに取り組んでいて、純粋にHTML5、CSS3（および必要に応じてJavaScript）を使用して、底が湾曲したdivを作成できるかどうか疑問に思っていたので、実際には次のようになります。
それとも、これは背景画像を使用してのみ行うことができますか?
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</body>
この形状を作成するために採用できるさまざまなアプローチがあります。以下は、可能性の詳細な説明です。
SVGは、このような形状を作成するための推奨される方法です。シンプルさと拡張性を提供します。以下にいくつかの方法を示します。
1- パス要素の使用:
SVGの要素を使用pathしてこの形状を作成し、単色、グラデーション、またはパターンで塗りつぶすことができます。
要素dの形状を定義するために使用される属性は 1 つだけです。pathこの属性自体には、多数の短いコマンドと、それらのコマンドが機能するために必要ないくつかのパラメーターが含まれています。
以下は、この形状を作成するために必要なコードです。
<path d="M 0,0
L 0,40
Q 250,80 500,40
L 500,0
Z" />
path以下は、上記のコードで使用されるコマンドの簡単な説明です。
Mコマンドを使用して開始点を定義します。先頭に表示され、描画を開始するポイントを指定します。Lコマンドを使用して直線を描画します。Qコマンドを使用して曲線を描画します。Zコマンドは、現在のパスを閉じるために使用されます。出力画像:
作業デモ:
svg {
width: 100%;
}<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>2- クリッピング:
クリッピングとは、要素の一部を削除または非表示にすることを意味します。
このアプローチでは、SVG のclipPath要素を使用してクリッピング領域を定義し、これを長方形の要素に適用します。クリッピング領域外の領域は非表示になります。
以下は必要なコードです。
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
以下は、上記のコードで使用される要素の簡単な説明です。
defselement は、後で SVG ドキュメントで使用するための要素/オブジェクトを定義するために使用されます。clipPath要素は、クリッピング領域を定義するために使用されます。rect要素は、長方形を作成するために使用されます。clip-path属性は、以前に作成したクリッピング パスをリンクするために使用されます。作業デモ:
svg {
width: 100%;
}<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
<defs>
<clipPath id="shape">
<path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>1-疑似要素の使用:
::beforeまたは疑似要素を使用::afterして、この形状を作成できます。これを作成する手順は次のとおりです。
::beforeOR疑似要素を持つレイヤーを作成します。::afterborder-radiusして丸みを帯びた形状を作成します。overflow: hidden親に追加して、不要な部分を非表示にします。必要な HTML:
div必要なのは、次のようなクラスを持つ可能性のある単一の要素だけshapeです。
<div class="shape"></div>
作業デモ:
.shape {
position: relative;
overflow: hidden;
height: 80px;
}
.shape::before {
border-radius: 100%;
position: absolute;
background: black;
right: -200px;
left: -200px;
top: -200px;
content: '';
bottom: 0;
}<div class="shape"></div>2-放射状グラデーション:
このアプローチでは、CSS3 のradial-gradient()関数を使用して、この図形を要素に背景として描画します。ただし、この方法ではあまり鮮明な画像が得られず、角がギザギザになる場合があります。
必要な HTML:
いくつかのクラスを持つ単一のdiv要素のみが必要になります。
<div class="shape"></div>
必要な CSS:
.shape {
background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}
作業デモ:
.shape {
background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
height: 80px;
}<div class="shape"></div>この場合は必須ではありませんが、完全を期すために、このアプローチも追加しています。これは、次の場合にも役立ちます。
HTML5 キャンバス:
パス関数を使用して、HTML5 Canvas 要素にこの形状を描画できます。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();<canvas id="canvas" width="622" height="80"></canvas>以下は、上記のコードで使用されるメソッドの簡単な説明です。
beginPath()新しいパスを作成するために使用されます。新しいパスが作成されると、以降の描画コマンドはそのパスに送られます。moveTo(x, y)xと で指定された座標にペンを移動しますy。lineTo(x, y)xは、現在のペンの位置から と で指定された点まで直線を描きますy。quadraticCurveTo(cp1x, cp1y, x, y)およびで指定された制御点xを使用して、現在のペン位置から で指定された点まで曲線を描画します。ycp1xcp1yfill()非ゼロまたは偶奇巻線規則を使用して電流経路を埋めます。役立つリソース:
CSS:
div{
background-color:black;
width:500px;
height:50px;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
これは大丈夫ですか : DEMO
これを試して
.navbar{
border-radius:50% 50% 0 0;
-webkit-border-radius:50% 50% 0 0;
background:#000;
min-height:100px;
}