CSSで円の内側に沿って文字を書く方法
shape-outsideを使ってshape-insideっぽいことをする

hoge

CSSのshape-outsideは、アウトラインに沿って外側に文字を書ける。

今回は、円の内側に文字を書きたい。

shape-insideはまだ使用できないので（CSS4になれば使えるという噂）、shape-outsideを使用してみた。

普通のshape-outside ↓

shape-outside
shape-outside

今回やりたいのは、こういうshape-inside（もどき） ↓

shape-inside
shape-inside

shape-inside
shape-inside

HTML ＆ CSS

■ HTML

<div class="shape_box">
  <div class="left"></div>
  <div class="right"></div>
  <p>a b c a b c a b c a b c a b c a b c a b c a b c ...</p>
</div>

■ CSS

.shape_box{
  width:80vmin; /* width = height */
  height:80vmin; /* width = height */

  /* 以下は必要に応じて↓ */
  margin:auto;
  border-radius:50%;
  background:skyblue; /* 背景色 */
  display:block;
  text-align:center;
  border:1px solid; /* 枠線 */
  box-sizing:content-box;
  overflow:hidden; /* あふれた文字は非表示 */
}
.left{
  float:left;
  width:50%;
  height:100%;
  shape-outside:radial-gradient(circle farthest-corner at center right, rgba(255, 255, 255, 0) 70%, rgb(255, 255, 255) 70%, white 100%);
}
.right{
  float:right;
  width:50%;
  height:100%;
  shape-outside:radial-gradient(circle farthest-corner at center left, rgba(255, 255, 255, 0) 70%, rgb(255, 255, 255) 70%, white 100%);
}
.shape_box p{
  font-size:10px;
}
shape-inside
shape-inside
shape-inside
shape-inside
shape-inside
shape-inside

 

最後に

 

円形に限定です。
複雑な図形は、画像やSVGやclip-pathを使用しないと無理かな。
shape-insideが使えるようになることが待たれます。

今回学んだのは、<img>タグでなくてもOKだということ（divもOK）って事と、
shape-outsideがradial-gradient()を認識するということへの驚き。

試してみるもんだ。