求助：CSS实现特定半圆形状失败，求正确实现方案

我来帮你搞定这个右侧半圆的样式问题！你当前的代码没达到预期，主要是border-radius的数值和元素宽高的比例不匹配导致的——要做出规整的半圆，得让圆角半径和元素的尺寸对应起来才行。

问题分析 #

你写的代码里，border-radius用了90px，但元素高度只有70px，圆角半径比元素高度还大，自然没法形成标准的半圆；另外，右侧半圆的宽度应该等于高度的一半（也就是半圆的半径），这样右侧的两个圆角才能刚好拼接成完整的弧形。

修正后的代码方案 #

下面是两种可行的实现方式，你可以根据需求选择：

方式1：固定数值写法（适合尺寸固定的场景）

.halfCircleRight {
  height: 70px; /* 半圆的直径 */
  width: 35px; /* 半圆的半径，等于高度的一半 */
  border-radius: 0 70px 70px 0; /* 右侧两个圆角的半径等于直径，左侧保持直角 */
  background: #000000;
}

对应的HTML还是你原来的结构：

<div class="halfCircleRight"></div>

方式2：百分比写法（自适应尺寸，更灵活）

如果之后需要调整半圆的大小，用百分比写法不用修改border-radius的数值，更省心：

.halfCircleRight {
  height: 70px;
  width: 35px;
  /* 四个角的水平/垂直半径：左上(0,100%)、右上(100%,100%)、右下(100%,100%)、左下(0,100%) */
  border-radius: 0 100% 100% 0 / 100% 100% 100% 100%;
  background: #000;
}

这两种写法都能帮你得到完美的右侧半圆，你可以直接复制测试效果~

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