CSSのみを使用して半円を作成するにはどうすればよいですか?

CSS のみを使用して半円を作成する

問題:

半円は作成できますか外部ツールやグラフィックスを使用せずに CSS を使用してシェイプを作成し、参照画像に示すように表示できますか?

解決策:

Border-Radius と Border を利用する:

この効果を実現するには、CSS プロパティ border-top-left-radius と border-top-right-radius を利用して、ボックスの高さと追加された境界線に基づいてボックスの角を丸めることができます。次に、ボックスの上部、右側、左側に枠線が適用され、半円の形状が完成します。

CSS コード:

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

このメソッド単一の div 要素のみを使用して、半円を効果的にレンダリングします。

box-sizing を使用した代替アプローチ: border-box:

別のオプションには、box-sizing プロパティが含まれます。これを border-box に設定すると、ボックスの幅と高さを計算するときに境界線を考慮に入れることができます。

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

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

どちらの方法も、CSS のみを使用して効果的に半円の形状を模倣します。

以上がCSSのみを使用して半円を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。