文字跟随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 transform：rotate（）;并将每个字母分成一个跨度。

但是再一次，我不确定这是一个好主意，这次可能是一个更干净的选择。

干杯，

Answer 2

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;