'Wrapping a text around a circular element

I have 2 DIV's as shown below and I've been trying to get the text between the two circles to wrap around the inner circle as shown on the attacthed image. I have not been able to achieve the desired result.

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

Example of desired result
enter image description here

csscss-float


Solution 1:[1]

See this post by Chris Coyier in which he separates each character of text into <span>s and rotates each one in turn using CSS rotation:

.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

Or use Dirk Weber's csswarp.js Service which pretty much does the same but uses javascript to generate the html and css for you. (csswarp.js on GitHub)

Or use SVG text on a path as in 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>

Or...

Use an image.

Solution 2:[2]

This is what you are looking for: http://css-tricks.com/set-text-on-a-circle/

Solution 3:[3]

Use base info from https://css-tricks.com/set-text-on-a-circle/ BUT with a simplifications and without any additional libs. And it will work with any text you type...

var lettering = function(node,text){
    var str = typeof text=='undefined'
        ?node.textContent
        :text;
    node.innerHTML='';
    var openTag = '<span>';
    var closeTag = '</span>';
    var newHTML = openTag;
    var closeTags = closeTag;
    for(var i=0,iCount=str.length;i<iCount;i++){
        newHTML+=str[i]+openTag;
        closeTags+=closeTag;
    }
    node.innerHTML = newHTML+closeTags;
}
lettering(
    document.getElementById('text'),
    Math.round(Math.random()*1000) + ' : Hello world!!!'
);
.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
  transform: rotate(10deg);
}
<div class='badge'>
<h1 id="text">Any custom text you type...</h1>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Luís P. A.
Solution 3

Related Questions