要素形状「適応楕円」_html/css_WEB-ITnose

デザインシーン

---

• コンテンツに応じて 自動的に調整および適応できることを期待して、要素に固定の幅と高さを指定しないことがあります。
• 幅と高さが等しい場合は円として表示され、幅と高さが等しくない場合は楕円として表示されます

解決策

---

構造

<div class="box">    <!-- 自适应的椭圆内容 --></div>

スタイル

.box {  width: 200px;  height: 200px;  border-radius: 50%;}

説明: このパーセント値は、 要素のサイズに基づいて解析されます

ここに書かれているように、編集者は次のように尋ねています: 半楕円形の実装方法はどうですか?

---

• 水平軸に沿って分割された上半楕円構造

  <div class="box">  <!-- 半椭圆内容 --></div>

  スタイル

  .box {width: 256px;height: 160px;background-color: #fb3;border-radius: 50% / 100% 100% 0 0;}

• 横軸に沿って分割された下半楕円構造

  <div class="box">  <!-- 半椭圆内容 --></div>

  スタイル

  .box {width: 256px;height: 160px;background-color: #fb3;border-radius: 50% / 0 0 100% 100%;}

• 縦軸に沿って分割された左半楕円構造

  <div class="box">  <!-- 半椭圆内容 --></div>

  スタイル

  .box {width: 256px;height: 160px;background-color: #fb3;border-radius:  100% 0 0 100% / 50%;}

• 縦軸に沿って分割された右半楕円構造

  <div class="box">  <!-- 半椭圆内容 --></div>

  スタイル

  .box {width: 256px;height: 160px;background-color: #fb3;border-radius:  0 100% 100% 0 / 50%;}

注:

border-radius 属性は、2 つの値がスラッシュ (/) で区切られている限り、水平半径と垂直半径 を個別に 指定できます。 )

これを書いた後、編集者はもう一度尋ねます: 四分の一楕円を実現するにはどうすればよいですか?

---

構造

<div class="box">    <!-- 半椭圆内容 --></div>

スタイル

.box {  width: 256px;  height: 160px;  background-color: #fb3;  border-radius:  100% 0 0 0;}

説明: 4 分の 1 楕円を作成するために満たすべき条件、

いずれかのレベル角と垂直半径の値は 100% に設定され、他の 3 つの角は 0 に設定されます

《CSS SECRETS》