如何用CSS绘制响应式椭圆？SVG方案尺寸过大遇困境

方案1：利用 border-radius + 百分比内边距 #

这是最经典的实现方式，核心是利用CSS中padding百分比值基于父元素宽度计算的特性，维持椭圆的宽高比，从而实现响应式。

代码示例：

.responsive-ellipse {
  width: 80%; /* 占父容器宽度的比例，可按需调整 */
  padding-top: 50%; /* 这里的50%对应宽高比2:1，椭圆的高是宽的一半，可根据需求修改 */
  border-radius: 50%;
  background-color: #2c3e50; /* 椭圆颜色，可自定义 */
}

原理：元素的高度由padding-top撑开，因为padding的百分比是相对于父元素宽度的，所以当窗口宽度变化时，高度会自动按比例调整，配合border-radius:50%就能得到始终保持比例的椭圆。

方案2：使用 aspect-ratio 属性（现代浏览器支持） #

如果你的项目不需要兼容旧版浏览器，aspect-ratio是更直观的选择，直接定义元素的宽高比，实现起来更简洁。

代码示例：

.responsive-ellipse {
  width: 80%;
  aspect-ratio: 2 / 1; /* 宽高比2:1，可按需修改，比如1/1就是正圆 */
  border-radius: 50%;
  background-color: #2c3e50;
}

原理：aspect-ratio直接锁定元素的宽高比例，当宽度随父容器变化时，高度会自动按比例适配，再加上border-radius:50%就生成了响应式椭圆。

注意事项 #

• 两种方案都可以通过调整width的值（比如设为100%占满父容器，或者固定的百分比）来控制椭圆的整体大小，完全适配不同屏幕尺寸。
• 相比SVG，CSS实现不需要额外的文件资源，代码量极小，不会出现文件尺寸过大的问题。

内容的提问来源于stack exchange，提问作者Nbouljih