CSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。 よく利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパターンです。 clip-pathで画像を切り抜いた例 clip-pathプロパティの詳細については、以下の記事がとても参考になります。 clip-pathプロパティで切り抜きたい図形を表すためには、図形の各頂点を漏れなくすべて座標で示す必要がありますが、複雑な多角形になるほど自力で計算するのはかなり面倒です。 そんなときは、以下のWebサービスを利用すると、マウス操作で求める図形を作成するだけで、clip-pathに指定するパスの値(座標)を自動で生成してくれます。 さて、今回のサンプルでは、そんなCSSのclip-pathプロパティを利用して、画像ではなくテキストをtra