単一の Div を使用して CSS で半円を作成する方法-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-26 09:29:29

オリジナル

294 人が閲覧しました

How to Create a Half-Circle with CSS Using a Single Div?

CSS で半円を作成する

質問:

CSS のみを使用して半円を作成するにはどうすればよいですか。単一の div 要素を使用し、SVG やグラフィックス API などの外部ツールに依存せずに実現できますか?

回答:

CSS を活用して半円効果を実現できます。境界線のプロパティ。これを行うには:

border-top-left-radius と border-top-right-radius を使用して、ボックスの高さと追加された境界線に基づいてボックスの角を丸くします。例:

border-top-left-radius: 110px;  // Height + Border
border-top-right-radius: 110px; // Height + Border

ログイン後にコピー

ボックスの上部、右側、左側に境界線を追加します。下の境界線を削除するには、border-bottom を 0 に設定します。

border: 10px solid gray;
border-bottom: 0;

ログイン後にコピー

丸い角と境界線のこの組み合わせにより、半円の形状が作成されます。

例:

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

ログイン後にコピー

代替方法:

代替アプローチは、ボックスの幅と高さを計算する box-sizing: border-box を使用することです。ボーダーとパディングを含む。この方法では、高さを幅のちょうど半分として指定できます:

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

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

ログイン後にコピー

どちらの方法でも、純粋に CSS 技術を使用して目的の半円効果を実現できます。

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