如何用CSS/SCSS创建固定高度的响应式椭圆（上半圆）

当前代码生成的椭圆弧度平缓，核心原因是元素宽高比（100%容器宽 vs 72px高）过小。要做出更窄更尖锐的椭圆，关键是增大椭圆的横向宽度占比，同时保持高度固定，提升椭圆的扁度。以下是两种可行方案：

方案一：超宽元素+居中偏移 #

直接让椭圆宽度超出容器，通过负margin实现水平居中，无需额外父容器，响应式适配性强：

.landing-bg__ellipse {
  height: 72px; // 固定高度，匹配需求
  background-color: #95cf9d;
  border-radius: 50% 50% 0 0;
  width: 200%; // 宽度设为容器的2倍，可根据视觉需求调整百分比
  margin-left: -50%; // 向左偏移自身宽度的50%，实现水平居中
}

width的百分比数值越大，椭圆顶部的弧度就越窄越尖。

方案二：transform缩放横向尺寸 #

利用transform: scaleX()放大元素宽度，配合原点定位避免位置偏移，需要父容器设置overflow: hidden裁剪超出部分：

// 父容器样式
.landing-bg {
  overflow: hidden;
  width: 100%;
}

// 椭圆元素样式
.landing-bg__ellipse {
  height: 72px;
  background-color: #95cf9d;
  border-radius: 50% 50% 0 0;
  width: 100%;
  transform: scaleX(2); // 横向放大2倍，可调整数值控制尖锐程度
  transform-origin: center bottom; // 以底部中心为缩放原点，防止元素整体上移
}

两种方案均能保持高度固定，且随容器宽度实现响应式变化，可根据实际布局选择适配方式。

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