shape-outsideをつかってテキストの表示領域を平行四辺形にする 📝

DEMO

See the Pen
shape-outside by kimmy (@kimmy)
on CodePen.

CSSシェイプをつかって、テキストを斜めに段組してみました。

developer.mozilla.org

やっていることは単純で、テキストの左右に三角形を置いて、floatで配置しているだけです。

縦位置をセンタリングするためにJavaScriptをつかってますが、それが必要ない場合はCSSのみで完結します。

floatで配置しないと効果がないため使い所は限られますが、polygonを使えばいくらでも複雑な図形を描くことができるので、わりと使い勝手は良さそうです。