围绕圆形元素包装文本

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>，然后使用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>

或......

使用图片。

Answer 2

您正在寻找：http://css-tricks.com/set-text-on-a-circle/