如何实现两段文本分别沿边缘呈半圆形态排列？

你的需求是让两段文本沿半圆弧度排列并分别位于容器两侧，我们可以通过SVG文本路径或者纯CSS形状布局来实现，这里提供两种可行方案：

方案一：使用SVG实现精准半圆文本排列 #

这种方式兼容性更好，能精准控制文本的弧度走向：

<div class="text-container">
  <!-- 左侧半圆文本 -->
  <svg class="side-svg left-svg" viewBox="0 0 200 200">
    <path id="left-path" d="M100,100 a100,100 0 1,1 0,-200" fill="none" />
    <text>
      <textPath href="#left-path" startOffset="50%" text-anchor="middle">this is text one</textPath>
    </text>
  </svg>
  <!-- 右侧半圆文本 -->
  <svg class="side-svg right-svg" viewBox="0 0 200 200">
    <path id="right-path" d="M100,100 a100,100 0 1,0 0,-200" fill="none" />
    <text>
      <textPath href="#right-path" startOffset="50%" text-anchor="middle">this is text two</textPath>
    </text>
  </svg>
</div>

.text-container {
  background-color: brown;
  height: 200px;
  width: 500px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.side-svg {
  width: 200px;
  height: 200px;
}

text {
  fill: white;
  font-size: 16px;
}

方案二：纯CSS实现近似半圆文本布局 #

如果不想依赖SVG，可利用shape-outside属性让文本围绕半圆区域排列，适合短文本场景：

<div class="text">
  <div class="left-wrap">
    <div class="semi-circle left-circle"></div>
    <p class="text-content">this is text one</p>
  </div>
  <div class="right-wrap">
    <div class="semi-circle right-circle"></div>
    <p class="text-content">this is text two</p>
  </div>
</div>

.text{
  background-color: brown;
  height: 200px;
  width: 500px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.left-wrap, .right-wrap {
  width: 120px;
}

.semi-circle {
  width: 100px;
  height: 200px;
}

.left-circle {
  float: left;
  shape-outside: radial-gradient(circle at left center, transparent 50%, #000 50%);
}

.right-circle {
  float: right;
  shape-outside: radial-gradient(circle at right center, transparent 50%, #000 50%);
}

.text-content {
  color: white;
  text-align: center;
}

方案说明 #

• 方案一通过SVG路径定义半圆轨迹，文本沿轨迹排列，弧度精准可控，适合对排版精度要求高的场景；
• 方案二利用CSS形状布局让文本围绕半圆区域分布，实现近似半圆的视觉效果，代码更轻量化。

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