2020.09.24  2021.04.02

cssでポリゴン型切り抜き clip-path が便利すぎる!

皆さんこんにちは!マコブログです!

本日は要素をポリゴン型や、円型に切り抜く便利なCSS、clip-pathをご紹介します!

WEBサイトを構築する際、cssのみで星形やポリゴン型などの形を作るのはとても手間がかかるし、できることなら画像処理で済ませたいですよね…。

そんな悩みを解決してくれるのがこちらのCSS…clip-pathなんです!!



このプロパティ(clip-path)は、divタグなどのHTML上の要素を、多角形でトリミングし、そこからはみ出した要素はover-flow:hidden;と同じく、見えない状態にするといったものです!

使用例

実際に使うとこんな感じ…↓

ですが、現在clip-pathを使用してデザインされたサイトは少なく、その実用例も多くないのが事実です。

その理由としては、IEはもちろんのこと、safariとの互換性が無いということが挙げられます…。

スマホユーザー(特にIOS)が圧倒的に多いこの世の中で、safariの互換性が無いのは致命傷ですよね…。

ですが、IEは別としていずれsafariでも互換性が確認できるようになったら、clip-pathをもちいて先進的なWEBサイトが作られること間違いなしだと思います。



逆に言ってしまえば、これらのデメリットを考慮した上での使用なら、とても魅力的でWEBサイト構築が楽しくなるcssプロパティだと思います!

でも、どうやって星形を作るんだろう…?とか、時間がなくて調べている暇がないよ…。といった方々におすすめしたいサイトがこちら!

https://bennettfeely.com/clippy/

なんとこちら、デフォルトで様々な形が用意されており、変形も自由自在、そして好みの形に変形した後は、該当の形に切り抜くためのソースもコピー可能なんです!

こちらのツールを使用して、是非あなたも最先端なWEB制作をされてみてはいかがでしょうか?

こちらの記事も是非チェックしてみてください↓
CSSでテキストにグラデーションをかける方法を紹介!

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →