将文本环绕在圆形元素周围

Question

我有 2 个 DIV，如下所示，我一直在尝试让两个圆圈之间的文本环绕内圈，如所附图像所示。我没能达到预期的结果。

超文本标记语言

<div id="outer-circle">

This is just a test logo name    

    <div id="inner-circle">

    </div><!-- End Inner Circle -->

</div><!-- End Outer Circle -->

CSS

* {
    margin: 0 auto;
}

#inner-circle {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-color: green;
    margin-top: 28px;
    position: relative;

}

#outer-circle {
    width: 300px;
    height: 300px;
    border-radius: 100%;
     background-color: blue;
    margin-top: 50px;
    text-align center;
    text-align: left;

}

单击此处查看当前但不期望的结果

期望结果的示例

Answer 1

请参阅Chris Coyier 的这篇文章，其中他将文本的每个字符分成<span>s 并使用 CSS 旋转依次旋转每个字符：

.char1 {
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  -o-transform: rotate(6deg);
  transform: rotate(6deg);
}
.char2 {
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}
...etc

或者使用Dirk Weber 的 csswarp.js 服务，它的作用几乎相同，但使用 javascript 为您生成 html 和 css。（GitHub 上的 csswarp.js）

或者在路径上使用 SVG 文本，如来自 useragentman.com 的示例

<svg id="myShape" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="path1"
          fill="none" stroke="black" stroke-width="1"
          d="M 212,65
             C 276,81 292,91 305,103 361,155 
               363,245 311,302 300,314 286,324 
               271,332 248,343 227,347 202,347 
               190,346 174,343 163,339 143,333">
    </path>
  </defs>
  <text id="myText">
    <textPath  xlink:href="#path1" >
      <tspan dy="0.3em">C is for Cookie, That's Good Enough For Me!</tspan>
    </textPath>
  </text>
</svg>

或者...

使用图像。