【CSS】円に文字をセットする

円(または任意のタイプの曲線)にcssタイプを設定できる超簡単なパスはありません.
しかし、これは完成できます!
私たちはここで実現方法を探求します.
しかし、事前に警告しておきますが、CSS 3やJavaScriptを使って、必要な技術をサポートしていない古いブラウザ(IE 7など)は解散してください.
実際のプロジェクトに興味がある場合は、適切なaltテキストを持つ画像または適切な特徴検出を使用して、このような問題を処理できるブラウザで画像を反転させることができる最善の解決策を提供することが望ましい.
一例
簡単なことを続けましょう.
プロセス全体
簡単なフレーズを例に挙げてみましょう.
設定しようとする単語を1つの輪に囲んで、単一のアルファベットに分解すると想像してみてください.
等幅フォントを使用することで、各ボックスのサイズが同じであることを確認します.
自転車のスポークのように、各ボックスを長くしましょう.
次に、これらのスポークをすべて束ねて、完全に重なるようにします.
スポークの末端を中心ハブに固定することを想像してみてください.各スポークを回転させるのは最後のスポークより少しだけ回転します.
親要素を反時計回りに回転させ、赤い基準線を削除すると、円にいくつかの文字が表示されます.
ぎじゅつビット
このように各アルファベットを操作するには、別の要素にパッケージする必要があります.
Lettering.jsは簡単にできます(jQueryとプラグイン依存性).
だからあなたはこれを持っています.

<h1>Established 2012</h1>

jQueryとLetteringをロードします.js、このコードを呼び出します.

$("h1").lettering();

DOMではこうなりました

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

これは実際には等幅フォントにのみ適用されます.各スパンを一定に設定して等間隔を強制しても、各アルファベット間の間隔は間違っており、奇妙に見えます.狂人の場合は、各回転を手動で調整することで手動で調整できます.
各スパンについて、高さを設定し、すべて同じ位置に配置し、transform-originをボックスの下部に設定して(中心の周りを回転させます.

h1 span {
     
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

これで、各セレクタがより多く回転するクラス名セレクタが必要になります.

.char1 {
      transform: rotate(6deg); }
.char2 {
      transform: rotate(12deg); }
.char3 {
      transform: rotate(18deg); }
/* and so on */

合計コード

<style>
.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;
}

.char1 {
     
  transform: rotate(6deg);
}

.char2 {
     
  transform: rotate(12deg);
}

.char3 {
     
  transform: rotate(18deg);
}

.char4 {
     
  transform: rotate(24deg);
}

.char5 {
     
  transform: rotate(30deg);
}

.char6 {
     
  transform: rotate(36deg);
}

.char7 {
     
  transform: rotate(42deg);
}

.char8 {
     
  transform: rotate(48deg);
}

.char9 {
     
  transform: rotate(54deg);
}

.char10 {
     
  transform: rotate(60deg);
}

.char11 {
     
  transform: rotate(66deg);
}

.char12 {
     
  transform: rotate(72deg);
}

.char13 {
     
  transform: rotate(78deg);
}

.char14 {
     
  transform: rotate(84deg);
}

.char15 {
     
  transform: rotate(90deg);
}

.char16 {
     
  transform: rotate(96deg);
}

.char17 {
     
  transform: rotate(102deg);
}

.char18 {
     
  transform: rotate(108deg);
}

.char19 {
     
  transform: rotate(114deg);
}

.char20 {
     
  transform: rotate(120deg);
}

.char21 {
     
  transform: rotate(126deg);
}

.char22 {
     
  transform: rotate(132deg);
}

.char23 {
     
  transform: rotate(138deg);
}

.char24 {
     
  transform: rotate(144deg);
}
</style>
<div id="page-wrap">
        
        <div class="badge">
          <h1>Established 2012</h1>
        </div>
    
    </div>
<script>
$(function() {
     
        $("h1").lettering();
    });
</script>

しかし、これは退屈で混乱する可能性があります.SassとCompassに比べて、3つのメリットがあります.

@for $i from 1 through 100 
  .char#{
     $i} 
    +transform(rotate(($i*6)+deg))

更新
これはクリス・エプスタインのSass(.sass)mixinで、より拡張されたテキスト回転mixinに使用されます.

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{
     $i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))