텍스트가 CSS로 반원 모양으로 이어집니다.

Question

내가 작성한 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 : 여기 내 코드 (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(); 각 문자를 스팬으로 분리합니다.

하지만 다시 한번 말하지만 좋은 생각 인 것 같습니다. 이번에는 이미지가 훨씬 더 깨끗한 옵션 일 것입니다.

건배,