テキストが半角円で囲まれたCSSを使用

Question

私が書いたCSSコードに問題があります。テキストを半円の形にするようにしようとしているので、テキストは形の内側にあるはずです。 私の形状は次のようになります。

だから私は複数の問題を抱えている、実際には...

• 半円はシャープではなく、他の国境に接続できません。
• 図形が2つの異なるコンポーネントで構成されているため、テキストは図形に追従しません。

誰かが私の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：： はここに私のコード（CSS）である

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

Answer 1

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>

Answer 2

私はあなたがCSSで簡単にを曲がったテキストを作ることができるとは思わないが、あなたはに興味があるかもしれませんこの記事の内容：https://css-tricks.com/set-text-on-a-circle/

cssトランスフォームを使用：rotate（）;各文字をスパンに分けること。

しかし、もう一度、私はそれが良いアイデアであるとは確信していません。多分、今度はもっときれいな画像でしょう。

乾杯、