シェイプは要素の枠を変形し、クリップは要素の見た目を任意の形で切り抜くスタイル。
要素の枠はテキストなどの流し込みに影響する。クリップはあくまで要素の見た目だけなので流し込みには影響しない。
それぞれの形には正円・楕円・多角形を指定できる。
また、 SVG を指定することで完全に自由な変形とクリップも実現可能。
アクセントになる画像さえ渡せば、あとはテキストの流し込みだけになる効率的なスタイル。
ただ、テキストが完全にフィックスしているのであれば、テキスト込みの画像でも良いかもしれない。
デモ
注意
- 対応環境は多くないが、未対応でも可読性に問題はないと思われる。
- クリップはパス、マスクは画像による切り抜きと解釈できる。
- 画像の透明度に従ってシェイプを形成することも仕様上は可能だが、ほとんど実装されていない上にローカルではセキュリティエラーが発生するため未掲載。
応用例
See the Pen shape-outside with clip-path by Stacy (@stacy) on CodePen.