如何用CSS border-radius实现水平偏移鸡蛋形（而非垂直）

要生成尖端朝左或朝右的鸡蛋形，核心是吃透border-radius的完整语法：它的斜杠/前后分别对应水平方向和垂直方向的四个圆角半径，顺序为「左上 → 右上 → 右下 → 左下」。

你之前做垂直方向鸡蛋形时，是保持水平方向四个圆角一致（全100%），调整垂直方向的上下圆角比例；反过来，要做水平方向的鸡蛋形，只需保持垂直方向四个圆角一致，调整水平方向的左右圆角比例即可：

• 尖端朝左：让左侧的两个水平圆角（左上、左下）用较小百分比，右侧的两个（右上、右下）用较大百分比，垂直方向全设为100%：

  border-radius: 80% 125% 125% 80% / 100% 100% 100% 100%;
  

• 尖端朝右：颠倒水平方向的左右圆角参数，让右侧的两个水平圆角（右上、右下）用较小值，左侧用较大值：

  border-radius: 125% 80% 80% 125% / 100% 100% 100% 100%;
  

简单说，垂直鸡蛋形是「调垂直半径，锁水平半径」，水平鸡蛋形就是「调水平半径，锁垂直半径」，沿用你之前用的125%/80%比例，就能得到同款形状的水平版本。

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