css 后半圆形的文字

Question

我写的 css 代码有问题。我正在尝试使文本遵循半圆形状，因此文本应该在形状内部。我的形状看起来像这样：

所以我有很多问题，实际上...

半圆不尖锐，不与其他边框相连。
文本不会跟随形状，因为形状由两个不同的部分组成。

有谁知道如何解决我的 css 问题？这是我的代码 (css):

.inversePair {
    border: 1px solid saddlebrown;
    display: inline-block;
    position: relative;
    height: 90%;
    margin-top: 7%;
    text-align: center;
}
#b {
    width: 90%;
    border-right: none;
    margin-left: 5%;
}
#b:after {
    content: '';
    position: absolute;
    border-left: 3px solid saddlebrown;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    border-radius: 50%;

}

和 html:

<div id="b" class="inversePair"></div>

Answer 1

我不认为你可以用 css 轻松地 制作弯曲的文本 ，但你可能会对这篇文章感兴趣：https://css-tricks.com/set-text-on-a-circle/

使用css变换：旋转（）；并将每个字母分隔成一个跨度。

但我再次不确定这是个好主意，也许这次图像会是一个更清晰的选择。

干杯，

Answer 2

方框和半圆可以用 div 标签创建。可以剪裁圆圈以仅显示左侧部分。文本字母可以旋转。他们虽然遵循循环路径。

<style>
  #box,
  #c {
    border: 1px solid #a9703a;
    height: 400px;
    width: 300px;
    background: #efdcad;
  }
  #box {
    border-right: none;
  }
  #c {
    border-radius: 50%;
    margin-left: 150px;
    position: absolute;
    clip: rect(0px, 150px, 400px, 0px);
  }
  #text {
    transform: rotate(-150deg);
  }
  #text span {
    font-size: 26px;
    height: 450px;
    position: absolute;
    top: -310px;
    left: -100px;
  }
  #t1 {
    transform: rotate(6deg);
  }
  #t2 {
    transform: rotate(12deg);
  }
  #t3 {
    transform: rotate(18deg);
  }
  #t4 {
    transform: rotate(24deg);
  }
  #t5 {
    transform: rotate(30deg);
  }
  #t6 {
    transform: rotate(36deg);
  }
  #t7 {
    transform: rotate(42deg);
  }
  #t8 {
    transform: rotate(48deg);
  }
  #t9 {
    transform: rotate(54deg);
  }
  #t10 {
    transform: rotate(60deg);
  }
  #t11 {
    transform: rotate(66deg);
  }
  #t12 {
    transform: rotate(72deg);
  }
  #t13 {
    transform: rotate(78deg);
  }
  #t14 {
    transform: rotate(84deg);
  }
  #t15 {
    transform: rotate(90deg);
  }
  #t16 {
    transform: rotate(96deg);
  }
  #t17 {
    transform: rotate(102deg);
  }
  #t18 {
    transform: rotate(108deg);
  }
  #t19 {
    transform: rotate(114deg);
  }
  #t20 {
    transform: rotate(120deg);
  }
</style>


<div id="box">
  <div id="c">
  </div>
  <div id="text">

    <span id="t1">T</span>
    <span id="t2">e</span>
    <span id="t3">x</span>
    <span id="t4">t</span>
    <span id="t5"></span>
    <span id="t6">t</span>
    <span id="t7">i</span>
    <span id="t8">t</span>
    <span id="t9">l</span>
    <span id="t10">e</span>
    <span id="t11"></span>
    <span id="t12">g</span>
    <span id="t13">o</span>
    <span id="t14">e</span>
    <span id="t15">s</span>
    <span id="t16"></span>
    <span id="t17">h</span>
    <span id="t18">e</span>
    <span id="t19">r</span>
    <span id="t20">e</span>

  </div>

</div>

css 后半圆形的文字

text following half circle shape with css

html

css

text

shape