単一の Div を使用して CSS で完全な半円を作成する方法

CSS で半円を作成する

CSS で円形を作成するのは難しい場合があります。単一の div と CSS 定義のみを使用して完璧な半円形状を生成する洗練されたソリューションをお探しの場合は、次のことを知っておく必要があります:

完璧なブレンド: 境界線と半径と境界線

目的の半円効果を実現するには、border-top-left-radius プロパティと border-top-right-radius プロパティを利用します。これらのプロパティは、高さと追加された境界線に基づいてターゲット ボックスの角を丸めます。

CSS 実装

次の CSS コードを検討してください:

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* half of the width */
    border-top-left-radius: 110px;  /* height + border */
    border-top-right-radius: 110px; /* height + border */
    border: 10px solid gray;
    border-bottom: 0;
}</code>

仕組み

border-top-left-radius プロパティと border-top-right-radius プロパティにより、ターゲット ボックスの上隅が確実に丸くなります。これらの値をボックスの高さと境界線の太さ (10px) の合計に設定することで、左右の境界線の直線とシームレスに接続する曲線を作成します。

代替アプローチ: ボックス-サイズ

あるいは、box-sizing プロパティを利用して、ボックスの幅と高さの計算に境界線とパディングを含めることもできます。

<code class="css">.half-circle {
    width: 200px;
    height: 100px; /* half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    box-sizing: border-box;
}</code>

結論

これらの CSS テクニックを使用すると、Web デザインの視覚的な魅力を高めるエレガントな半円形を簡単に作成できるようになります。

以上が単一の Div を使用して CSS で完全な半円を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。