CSSでアニメみたいに文字や画像を真っ二つ、斜めに斬るスタイルシートのテクニック

文字や画像をCSSで、真っ二つに斜めに斬るスタイルシートのテクニックを紹介します。左上からなので天翔龍閃とは違うのですが、袈裟斬りの感じがかっこいいです。

CSSで天翔龍閃!CSSで天翔龍閃!


このCSSは文字だけでなく、画像も斬ることができます。
空の画像を用意してました。

空の写真

写真: Unsplash

空裂斬!

実際の動作は、下記ページで楽しめます。

See the Pen
Cutting text effect
by CHENXINNN (@chenxinnn)
on CodePen.

コードは、下記のようになっています。
HTMLでは、斬る要素を3つ用意します。

3つの要素は上から、斬った後の上半分、下半分、一番上に表示です。上半分と下半分はclip-pathで斜めに斬ります。剣筋のカラーを変更したい場合は、crackのカラーを変更します。

sponsors

top of page

©2024 coliss