html - 没有javascript的圆圈上的 flex 文本

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>

您可以用谷歌搜索他们的旗帜的外观。我想要曲线文本在 .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>