便利なclip-path

2023/10/19

エンジニアインターン

みなさん、こんにちは！京都事業所受託プロダクトチームインターン生の肖かえいです😆
本日は今日学んだ新たなCSSプロパティについて書いていこうと思います。

それは「clip-path」

こちらのプロパティ今まで知らなかったのが悔しいくらいめっちゃ便利なんです！！！

clip-pathはどういうプロパティかというとその名の通り「要素を切り取ることができるプロパティ」なんです。

例えば四角い要素を円にしたい場合、一般的にはborder-radiusというプロパティを使います。
しかしこれは要素を切り取って円にするというよりかは、要素を円にするという形のプロパティです。
つまり画像にborder-radiusを適応した場合、縮尺が変わったり位置がずれたりといったことが起きてしまうわけですね。

たいしてclip-pathは切り取った位置や縮尺は変わりません。そのまま使えるわけです。

これの何が便利かというと例えばcssでアニメーションを作る際に変に位置の調整をしなくてもよくなるんです。
clip-pathはほかにも要素に装飾したい場合に活用することができます！

clip-pathはこれから使う機会が多くなるプロパティになるのでしっかり身に着けておきたいです。

---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------