Curved text over a circle without javascript

Question

I'm trying to make the flag of Brazil. So far I have this: 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>

You can google how their flags looks. I want the curve the text over the .globe. So far I've tried this: http://jsfiddle.net/FakeHeal/wxedxmnd/10/

PS: I know that the stars are not properly aligned and less than the actual number

Answer 1

SVG

Svg is easier to use for this purpose.

I would suggest using a textPath element for this:
Look at Paths and textPath For creating a text-path

<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

Check the updated fiddle : 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

I have tries to create Brazil flag using css only.... Unfortunately, I was unable to put the code here because of body limit.... hence I have uploaded the code on 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>

Here is the link: http://jsfiddle.net/JafferWilson/cskn37Lx/

I have put a small part of my code as Stackoverflow restricted me to put a code and then the link of jsfiddle.net...ok So, please check the link for complete code.....ok