以下用css半圈形狀的文本

我遇到了我編寫的css代碼的問題。我試圖讓文字遵循半圈形狀，所以文字應該在形狀的內部。我的形狀看起來像這樣：以下用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>

來源

2016-12-09 viddrawings

你將不能夠解決這一問題的純CSS，除非你知道你要放在那裏到底是什麼內容，並且可以計算出每片含元素的寬度文本並將其標記在CSS中。 – junkfoodjunkie

框和半圈可以創建一個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>

來源

2016-12-10 01:06:09

非常感謝！我堅持了幾天，這是解決方案！ – viddrawings

我不認爲你可以使彎曲文字，很容易用CSS，但你可能會感興趣這篇文章雖然：https://css-tricks.com/set-text-on-a-circle/

使用CSS變換：rotate（）;並將每個字母分隔成一個跨度。

但我再一次不確定這是一個好主意，也許這次圖像將是一個更清潔的選項。

乾杯，

來源

2016-12-10 00:09:34

感謝您的回答，DavicC提供了一個完整的解決方案，但謝謝您的時間！ – viddrawings

不用擔心，DavicC的回答是更好的:)很高興工作！ –

以下用css半圈形狀的文本

回答

相關問題