текст следующий полукруг форма с 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

коробки и половина круг может быть создан с помощью тега сНу. Круг можно обрезать, чтобы показать только левую часть. Текстовые буквы можно повернуть. Однако они следуют по круговой траектории.

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

Answer 2

Я не думаю, что вы можете сделать изогнутый текст , который легко с помощью CSS, но вы можете быть заинтересованы в эта статья: https://css-tricks.com/set-text-on-a-circle/

Использование css transform: rotate(); и отделяя каждую букву в промежутке.

Но еще раз, я не уверен, что это хорошая идея, возможно, на этот раз изображение станет намного более чистым вариантом.

Приветствия,