CSSで半円を作る方法

」 HTML ファイルの body タグ内の要素。

---

---

HTML

< 分周 >< / 分周 >

ここで、div に適切なサイズを設定します。 幅 ”プロパティ値として” 180px ' と ' 身長 「価値のある物件」 90px 」。次のステップでは、「 境界半径 「資産価値」 12レム 12レム 0 0 」;ここで、最初の数字 12rem は div の左上をトリムし、2 番目の 12rem は右上をトリムし、3 番目と 4 番目の数字 0 は div の下部全体を切り取ります。最後に、円に色を付けるために、「 背景色 ”値を持つプロパティ” 紫の 」。

CSS

分周 {
幅 : 180px ;
身長 : 90px ;
境界半径 : 12レム 12レム 0 0 ;
背景色 : 紫の ;
}

上記のコードを含む HTML ファイルを保存し、ブラウザーで開きます。

ご覧のとおり、CSS の border-radius プロパティを使用して半円を正常に作成できました。

例 2: CSS で下から半円を作成する

下から半円を形成するために、border-radius プロパティ値を「 0 0 12レム 12レム ここで、最初の 2 つの値は、左上と右上の境界半径を表します。 div の上半分を完全に非表示にするために、それらを 0 に設定しました。下部については、値を 12rem に設定して、左下と右下を少しだけトリミングしました。

CSS

分周 {
幅 : 180px ;
身長 : 90px ;
境界半径 : 0 0 12レム 12レム ;
背景色 : 紫の ;
}

出力

例 3: CSS で右から半円を作成する

右側の CSS 半円を作成するには、円の適切な形状を取得する必要があるため、最初にコンテナーの高さと幅を調整します。をセットする ' 幅 ' なので ' 90px ' と ' 身長 ' なので ' 180px ' この時。繰り返しますが、border-radius プロパティの値を「 0 12レム 12レム 0 ここで、最初の値 0 は左上側、最後の値 0 は左下側、2 番目と 3 番目の値は右上側と右下側をトリミングするために追加されます。これらの値を適用すると、右から半円が形成されます。

CSS

分周 {
幅 : 90px ;
身長 : 180px ;
境界半径 : 0 12レム 12レム 0 ;
背景色 : 紫の ;
}

出力

例 4: CSS で左から半円を作成する

今回は、border-radius プロパティを value に沿って指定します。 12レム 0 0 12レム 」;最初と最後の値 12rem は、div の左上と左下をトリミングし、2 番目と 3 番目の値を 0 に設定すると、円の右上と右下が明確になります。最終的に、左側の半円が作成されます。

CSS

分周 {
幅 : 90px ;
身長 : 180px ;
境界半径 : 12レム 0 0 12レム ;
背景色 : 紫の ;
}

出力

CSS で半円を作成するためのさまざまな方法を提供しました。

結論

半円を作成するには、CSS「 境界半径 ' 財産。半円は、左右上下など、左右に作成できます。 border-radius プロパティの初期値は左上、2 番目は右上、3 番目は右下、4 番目は左下です。この記事では、CSS で半円を作成する方法について説明しました。