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

半円を作成するためのエレガントな CSS ソリューション

単一の div のみを使用し、外部を使用せずに CSS で半円を作成するという課題

Border-Radius と Borders の利用

1 つのアプローチは、border-top-left-radius と border-top-right- を使用することです。 radius プロパティを使用して、高さに基づいてボックスの角を丸くします。これを上部、右側、左側の境界線と組み合わせて、半円効果を実現します。

CSS コード:

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

Box-Sizing の代替手段

もう 1 つのオプションは、box-sizing: border-box プロパティを使用して、ボックスの幅と高さの計算にボーダーとパディングを含めることです。これにより、CSS で半径と境界線の正確な値を使用できるようになります。

CSS コード:

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

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

これらのアプローチは、半円を作成するための洗練された CSS のみのソリューションを提供します。単一の div を使用し、追加のライブラリを回避するという要件を満たします。

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