HTML5 および CSS3 で円形要素を作成するにはどうすればよいですか?

CSS3 を使用した HTML5 での円形要素の作成

標準要素を使用して HTML5 で直接円を描くことはできません。ただし、CSS スタイル手法を使用して近似を作成できます。

角が丸い近似

1 つの方法は、角が丸い長方形を作成することです。 border-radius プロパティを目的の円の高さまたは幅の半分に設定すると、滑らかな曲線が作成されます。

HTML および CSS コード:

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

このコードは、視覚的に 50 ピクセルの円に近似する角の丸い赤い四角形を作成します。直径。

内側にテキストを追加する (オプション)

近似円の内側にテキストを配置するには、HTML タグ内の DIV 要素にコンテンツを追加します。

<div><p>適切な CSS スタイル (例: text-align: center;) を使用すると、円形の範囲内でテキストを整列させることができます。要素。</p></div>