在沒有javascript的圓圈上彎曲的文字

Question

我正在嘗試製作巴西國旗。到目前爲止，我有這樣的： CSS：

.flags { 
 
    width: 700px; 
 
    height: 375px; 
 
    position: relative; 
 
} 
 
.flag-brazil { 
 
    background-color: #00923F; 
 
} 
 
.flag-brazil .square { 
 
    width: 38%; 
 
    height: 65%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -19.5%; 
 
    margin-top: -16.25%; 
 
    background: #F8C300; 
 
    transform: rotate(-33deg) skewX(25deg); 
 
} 
 
.flag-brazil .globe { 
 
    width: 30%; 
 
    height: 55.8%; 
 
    background: #28166F; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -13.95%; 
 
    margin-left: -15%; 
 
} 
 
.flag-brazil .globe .text { 
 
    font-family: "Arial"; 
 
    font-size: 1em; 
 
    background: white; 
 
    font-weight: bold; 
 
    color: #169B4F; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding: 0 5%; 
 
    position: absolute; 
 
    top: 20%; 
 
} 
 
.flag-brazil .globe .stars > span { 
 
    display: inline-block; 
 
    position: absolute; 
 
    color: white; 
 
} 
 
.flag-brazil .globe .stars > span:before { 
 
    content: "\2605"; 
 
    position: absolute; 
 
    left: 0; 
 
    color: white; 
 
} 
 
.flag-brazil .globe .stars > span.big { 
 
    width: 1.1em; 
 
    font-size: 12px; 
 
} 
 
.flag-brazil .globe .stars > span.medium { 
 
    width: 0.7em; 
 
    font-size: 9px; 
 
} 
 
.flag-brazil .globe .stars > span.small { 
 
    width: 0.4em; 
 
    font-size: 6px; 
 
} 
 
.flag-brazil .globe .stars > span.star_1 { 
 
    bottom: 10%; 
 
    left: 25%; 
 
} 
 
.flag-brazil .globe .stars > span.star_2 { 
 
    bottom: 15%; 
 
    left: 51%; 
 
} 
 
.flag-brazil .globe .stars > span.star_3 { 
 
    bottom: 32%; 
 
    left: 32%; 
 
} 
 
.flag-brazil .globe .stars > span.star_4 { 
 
    bottom: 17%; 
 
    left: 17%; 
 
} 
 
.flag-brazil .globe .stars > span.star_5 { 
 
    bottom: 22%; 
 
    left: 34%; 
 
} 
 
.flag-brazil .globe .stars > span.star_5 { 
 
    bottom: 33%; 
 
    left: 69%; 
 
} 
 
.flag-brazil .globe .stars > span.star_6 { 
 
    bottom: 23%; 
 
    left: 49%; 
 
} 
 
.flag-brazil .globe .stars > span.star_7 { 
 
    bottom: 18%; 
 
    left: 71%; 
 
} 
 
.flag-brazil .globe .stars > span.star_8 { 
 
    bottom: 28%; 
 
    left: 71%; 
 
} 
 
.flag-brazil .globe .stars > span.star_9 { 
 
    bottom: 26%; 
 
    left: 59%; 
 
} 
 
.flag-brazil .globe .stars > span.star_10 { 
 
    bottom: 39%; 
 
    left: 83%; 
 
} 
 
.flag-brazil .globe .stars > span.star_11 { 
 
    bottom: 10%; 
 
    left: 61%; 
 
} 
 
.flag-brazil .globe .stars > span.star_12 { 
 
    bottom: 5%; 
 
    left: 43%; 
 
} 
 
.flag-brazil .globe .stars > span.star_13 { 
 
    bottom: 7%; 
 
    left: 36%; 
 
} 
 
.flag-brazil .globe .stars > span.star_14 { 
 
    bottom: 17%; 
 
    left: 33%; 
 
} 
 
.flag-brazil .globe .stars > span.star_15 { 
 
    bottom: 29%; 
 
    left: 13%; 
 
} 
 
.flag-brazil .globe .stars > span.star_16 { 
 
    bottom: 64%; 
 
    left: 64%; 
 
}

<div class="flags flag-brazil"> 
 
    <div class="square"></div> 
 
    <div class="globe"> 
 
    <div class="stars"> 
 
     <span class="big star_1">☆</span> 
 
     <span class="big star_2">☆</span> 
 
     <span class="big star_3">☆</span> 
 
     <span class="medium star_4">☆</span> 
 
     <span class="medium star_5">☆</span> 
 
     <span class="small star_6">☆</span> 
 
     <span class="small star_7">☆</span> 
 
     <span class="small star_8">☆</span> 
 
     <span class="medium star_9">☆</span> 
 
     <span class="medium star_10">☆</span> 
 
     <span class="medium star_11">☆</span> 
 
     <span class="small star_12">☆</span> 
 
     <span class="medium star_13">☆</span> 
 
     <span class="big star_14">☆</span> 
 
     <span class="big star_15">☆</span> 
 
     <span class="big star_16">☆</span> 
 
     <div class="text"> 
 
     <span class="char1">O</span> 
 
     <span class="char2">r</span> 
 
     <span class="char3">d</span> 
 
     <span class="char4">e</span> 
 
     <span class="char5">m</span> 
 
     <span class="char6">&nbsp;</span> 
 
     <span class="char7">e</span> 
 
     <span class="char8">&nbsp;</span> 
 
     <span class="char9">P</span> 
 
     <span class="char10">r</span> 
 
     <span class="char11">o</span> 
 
     <span class="char12">g</span> 
 
     <span class="char13">r</span> 
 
     <span class="char14">e</span> 
 
     <span class="char15">s</span> 
 
     <span class="char16">s</span> 
 
     <span class="char17">o</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

可以在Google本國國旗的樣子。我希望曲線在.globe之上。到目前爲止，我已經試過這樣： http://jsfiddle.net/FakeHeal/wxedxmnd/10/

PS：我知道，明星們沒有正確對齊，並且小於實際數量

Answer 1

SVG

SVG是更容易使用用於此目的。

我會建議使用此一textPath元素：
看Paths和textPath 有關創建文本路徑

<svg width="300px" height="300px" viewBox="0 0 200 200"> 
 
    <path id="test" stroke="#222" fill="none" d="M0,50 A20 20 0 0 1 50,50 A20 20 0 0 0 100,50"></path> 
 
    <text x="50" y="50"> 
 
    <textPath xlink:href="#test" startOffset="-30"> 
 
     example, example, example, example, 
 
    </textPath> 
 
    </text> 
 
</svg>

Answer 2

檢查更新小提琴：http://jsfiddle.net/sachinkk/wxedxmnd/13/

CSS：

.flag-brazil .globe .text { 
    font-family: "Arial"; 
    font-size: 0.6em; 
    background: white; 
    font-weight: bold; 
    color: #169B4F; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 0 5%; 
    position: absolute; 
    top: 33%; 
    left: 7px; 
    transform: rotate(20deg); 
    border-top-left-radius: 79%; 
    border-top-right-radius: 86%; 
    width: 91%; 
    height: 30px; 
} 

.flag-brazil .globe .text:after{ 
    content: ''; 
    width: 100%; 
    height: 30px; 
    background-color: #28166F; 
    position: absolute; 
    left: 0px; 
    border-radius: 100%; 
    top: 17px; 
} 
.flag-brazil .globe .text span{ 
    margin-top: 6px; 
    display: inline-block; 
} 

Answer 3

我嘗試使用CSS只....不幸的是，我無法把這裏因身體極限的代碼來創建巴西國旗....所以我已經上載jsfiddle.net的代碼。 ..

<tr height=1 bgcolor="#009b3a"> 
       <td colspan=47 rowspan=3 bgcolor="#009a3a" /> 
       <td rowspan=3 /> 
       <td bgcolor="#009b3c" /> 
       <td /> 
      </tr> 
      <tr height=1 bgcolor="#009c3c"> 
       <td /> 
       <td bgcolor="#009b3c" /> 
      </tr> 
      <tr height=1 bgcolor="#009b3c"> 
       <td colspan=2 /> 
      </tr> 
      <tr height=1> 
       <td colspan=48 rowspan=5 /> 
       <td bgcolor="#009837" /> 
       <td bgcolor="#009b3a" /> 
      </tr> 
      <tr height=1 bgcolor="#009c3b"> 
       <td /> 
       <td bgcolor="#009939" /> 
      </tr> 
      <tr height=1 bgcolor="#009a37"> 
       <td /> 
       <td bgcolor="#009a38" /> 
      </tr> 
      <tr height=1 bgcolor="#009b3a"> 
       <td /> 
       <td bgcolor="#029c3a" /> 
      </tr> 
      <tr height=1 bgcolor="#009939"> 
       <td colspan=2 /> 
      </tr> 

這裏是鏈接：http://jsfiddle.net/JafferWilson/cskn37Lx/

我已經把我的代碼的一小部分作爲限制＃1我把一個代碼，然後jsfiddle.net的鏈接...好了，所以，請檢查完整代碼的鏈接.....好吧