CSSで楕円を描く

CSS SCSS

CSSで楕円を描く

CSSで楕円を描くには、border-radius プロパティを使用します。
楕円形を作成するためには、border-radius の値を異なる割合で設定し、要素の幅と高さを調整します。
以下はその方法の例です。

まず、HTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>楕円の例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="test-ellipse"></div>
</body>
</html>

次に、CSSファイルを作成します。

/* styles.css */
.test-ellipse {
  width: 200px;  /* 幅を設定 */
  height: 100px; /* 高さを設定 */
  background-color: #3498db; /* 背景色を設定 */
  border-radius: 100px / 50px; /* 幅と高さの半分を指定して楕円を作成 */
}

この例では、.test-ellipse クラスを持つ div 要素が楕円形になります。
border-radius プロパティに設定する値は、幅と高さの半分を指定することで楕円形を作ります。
具体的には、border-radius プロパティに 100px / 50px と指定することで、幅200px、高さ100pxの楕円が描かれます。

border-radius の指定方法には、以下の2つの主な形式があります。

1. 単一の値:
border-radius: 50%; と設定すると、幅と高さが同じであれば、完全な円が作成されます。
楕円を描くためには、単一の値でなく、2つの値を使って半径の比率を指定します。

2. 2つの値:
border-radius: 100px / 50px; の形式で、最初の値が水平半径、次の値が垂直半径を示します。
この方法で楕円形を作ることができます。

border-radius プロパティのこの設定により、異なる幅と高さを持つ楕円を作成できます。
サイズや色を調整することで、さまざまなデザインに対応することができます。