CSS高级椭圆形形状实现求助：使用after、bottom和skew无法实现

嘿，我懂你这种想用CSS搞出特定椭圆形却卡壳的感觉——折腾了:after伪元素、bottom定位还有skew变形，结果椭圆没做出来，还得操心下面的内容不被影响，对吧？咱们来一步步把这个问题解决掉。

首先得澄清一个误区：skew是用来给元素做倾斜变形的，不是用来创建椭圆形状的。椭圆的核心实现逻辑其实是用border-radius的百分比组合，或者配合transform: scale来拉伸圆形，咱们先从最基础的椭圆实现说起。

方案1：直接用border-radius创建椭圆 #

这是最直观的方法，通过调整border-radius的水平/垂直百分比来控制椭圆的扁圆程度：

/* 父容器，用来控制位置和避免遮挡下方内容 */
.oval-wrapper {
  position: relative;
  /* 给椭圆预留空间，防止它盖住下面的内容 */
  padding-bottom: 50px;
  width: 80%;
  margin: 0 auto;
}

/* 核心椭圆元素 */
.custom-oval {
  width: 100%;
  height: 80px;
  background: #2563eb;
  /* 水平半径50%，垂直半径100% → 扁椭圆；如果要竖椭圆就反过来 */
  border-radius: 50% / 100%;
}

方案2：用:after伪元素做底部装饰椭圆 #

如果你的需求是让椭圆作为某个模块的底部装饰（比如卡片下方的弧形椭圆），那用伪元素的写法更合适，还能避免额外的HTML标签：

<div class="card">
  <h2>这是卡片内容</h2>
  <p>卡片里的文字，下面会有一个椭圆装饰</p>
</div>
<p>这是椭圆下方的内容，完全不会被遮挡</p>

.card {
  position: relative; /* 必须设置，让伪元素相对它定位 */
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: #f8fafc;
  border-radius: 10px;
}

.card:after {
  content: ""; /* 伪元素必须有content属性 */
  position: absolute;
  bottom: -25px; /* 调整这个值让椭圆刚好贴在卡片底部 */
  left: 5%;
  width: 90%;
  height: 50px;
  background: #0ea5e9;
  /* 打造扁椭圆的关键：水平50%，垂直100% */
  border-radius: 50% / 100%;
  /* 如果需要轻微倾斜效果，再加skew（这才是skew的正确用法） */
  transform: skewX(-8deg);
  z-index: -1; /* 把椭圆放到卡片底层，避免挡住下方内容 */
}

/* 给下方内容留足间距，确保排版美观 */
.card + p {
  max-width: 500px;
  margin: 1rem auto;
  padding: 0 1rem;
}

关键注意点 #

• 定位规则：用:after伪元素时，父元素一定要设置position: relative，否则伪元素会相对于整个页面定位，位置完全跑偏。
• 避免遮挡：要么给父元素加padding-bottom预留空间，要么给伪元素设置z-index: -1让它沉到底层，这样下方的内容就能正常显示。
• 椭圆形状控制：border-radius: X% / Y%中，第一个值是水平方向的圆角半径，第二个是垂直方向的——调整这两个百分比就能做出各种比例的椭圆，比如border-radius: 100% / 50%就是竖椭圆。
• skew的正确用法：如果需要椭圆有倾斜效果，先做好椭圆形状，再叠加transform: skewX()或skewY()，而不是用skew来造椭圆。

这样调整之后，你应该就能得到想要的椭圆形，同时不会影响下方的内容啦！

内容的提问来源于stack exchange，提问作者Nikola Knežević