<style>/* cssはなくても大丈夫だが、つけないとほぼ確実に見た目が悪くなる。 */#test{background-color:black;color:white;position:relative;width:400px;height:400px;}</style><divid="test">I am the flesh and bone of my own sword, Steel flows through my body, And fire is what courses through my blood, I have created over thousand blades. Unknown to Death. Nor known to life, Many times have withstood enormous pain to create thousands of weapons. And yet those hands that are brave so much never hold anything, So as I pray now I call for “Unlimited blade works”.</div><script type="text/javascript">(function(){functionToArch(element){// 要素内のテキストを抜き出して配列にするvartext=element.textContent;text=text.split('');// 要素内のテキストを１文字ずつかこみ、それらに角度と高さを設定element.innerHTML='';for(varint=0;int<text.length;int++){vardivnode=null;// 要素の角度vardivrotate=(360/text.length)*int;divnode=document.createElement('span');divnode.innerHTML=text[int];divnode.style.position='absolute';divnode.style.height='50%';divnode.style.color='unset';divnode.style.transformOrigin='bottom center';divnode.style.top='0';divnode.style.bottom='0';divnode.style.left='49.5%';divnode.style.transform='rotate('+divrotate+'deg)';element.appendChild(divnode);}returnelement;}// 引数にはdocument要素を入れること。vararchtarget=document.getElementById('test');ToArch(archtarget);})();</script>