web-dev-qa-db-ja.com

底がカーブしたdivを作成できますか？

だから私はサイトに取り組んでいて、純粋にHTML5、CSS3（および必要に応じてJavaScript）を使用して、湾曲した底を持つdivを作成することが可能かどうか疑問に思っていたので、実際には次のようになります：

enter image description here

または、これは背景画像を使用してのみ実行できますか？

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">Home</a></li>
        </ul>
        </div>
    </div>
</body>
htmlcsshtml5css3css-shapes
20
ShiftyF97

CSS：

div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

これは大丈夫です： [〜＃〜] demo [〜＃〜]

25
Aravind30790

この形状を作成するために採用できるさまざまなアプローチがあります。以下は、可能性の詳細な説明です。

SVGベースのアプローチ：

SVGは、このような形状を作成するための推奨される方法です。シンプルさと拡張性を提供します。以下にいくつかの可能な方法を示します。

1-パス要素の使用：

SVGのpath要素を使用してこの形状を作成し、単色、グラデーション、またはパターンで塗りつぶすことができます。

d要素の形状を定義するために使用される属性はpathのみです。この属性自体には、多数の短いコマンドと、それらのコマンドが機能するために必要ないくつかのパラメーターが含まれています。

以下は、この形状を作成するために必要なコードです。

_<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />
_

上記のコードで使用されるpathコマンドの簡単な説明を以下に示します。

  • Mコマンドを使用して、開始点を定義します。最初に表示され、描画を開始するポイントを指定します。
  • Lコマンドは、直線を描くために使用されます。
  • Qコマンドは、曲線を描くために使用されます。
  • Zコマンドは、現在のパスを閉じるために使用されます。

出力画像：

Div element with curved bottom

作業デモ：

_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)" />
_

以下は、上記のコードで使用される要素の簡単な説明です。

  • defs要素は、後で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>_

CSSベースのアプローチ：

1-擬似要素の使用：

_::before_または_::after_疑似要素を使用して、この形状を作成できます。これを作成する手順は次のとおりです。

  • 親よりも幅と高さが大きい_::before_ OR _::after_）擬似要素でレイヤーを作成します。
  • _border-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>_

JavaScriptベースのアプローチ：

この場合は必須ではありませんが、完全を期すために、このアプローチも追加しています。これはいくつかの場合にも役立ちます：

HTML5 Canvas：

パス関数を使用して、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)は、_cp1x_および_cp1y_で指定された制御点を使用して、現在のペン位置からxおよびyで指定された点に曲線を描きます。
  • fill()は、非ゼロまたは偶数/奇数のワインディング規則を使用して現在のパスを埋めます。

有用なリソース：

28
Mohammad Usman

これはあなたが望むものです：

div{
    background-color: black;
    width: 500px;
    height: 300px;
    border-radius: 0 0 50% 50% / 50px;
}

受け入れられている答えとは異なり、これはdivの高さが増加した場合でも機能します。

デモ： jsFiddle

8
manish_s

はい、CSSでこれを行うことができます-基本的にdivをページよりも広くして、丸みを帯びたエッジを修正し、xとyの両方の値を使用する下の境界半径、および補正するための負の下マージンを使用して補正しますギャップ：

border-bottom-left-radius: 50% 200px; // across half & up 200px at left Edge
border-bottom-right-radius: 50% 200px; // across half & up 200px at right Edge
width: 160%; overflow: hidden; // make larger, hide side bits
margin-bottom: -50px; // apply negative margin to compensate for bottom gap
position: relative; left:-30%; // re-position whole element so extra is on each side (you may need to add display:block;)
1
Vision Hive

これを試して

.navbar{
    border-radius:50% 50% 0 0;
    -webkit-border-radius:50% 50% 0 0;
    background:#000;
    min-height:100px;
}

jsFiddle File

0
Roy Sonasish