css - 在圆形元素周围环绕文本

Question

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

HTML

<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;

}

Click here to see current but undesired result

期望结果示例

Answer 1

参见 this post by 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's csswarp.js Service 几乎做同样的事情，但使用 javascript 为您生成 html 和 css。 ( csswarp.js on GitHub )

或者在路径上使用 SVG 文本，如 this example from 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>

或者……

使用图片。