wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

CSSのclip-pathの紹介

memoirのLPサイトのデザインでCSSのclip-pathを使用してみた感じ結構良さ気だったのでサンプルリポジトリを作成してみたので紹介

リポジトリ

github.com

紹介

以下で紹介用のサイトとスライドを作成した。

■URL
https://try-css.vercel.app/

■スライド
speakerdeck.com

CSSのclip-pathを使用することで、要素をトリミングして、様々な形状に変更することが可能になります。

developer.mozilla.org

使い方としては、以下のようにclip-pathをしていすると、

.triangle {
  background-color: #fff;
  width: 10rem;
  height: 10rem;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

要素を、以下の画像のように三角形にトリミングできる。

f:id:wheatandcat:20220302084700p:plain:w480

clip-pathに以下のパラメータを設定できる。

内容
inset 四角形を設定
circle 丸を設定
ellipse 楕円を設定
polygon 多角形を設定

これを使用してサンプルを色々作ってみた。

サンプル週

斜め線を使用したデザイン

https://try-css.vercel.app/clippath/section

f:id:wheatandcat:20220302085246p:plain:w480

カードにリボンをつける

https://try-css.vercel.app/clippath/ribbon

f:id:wheatandcat:20220302085436p:plain:w480

clip-pathでボタンにアニメーションをつける

https://try-css.vercel.app/clippath/button

マウスホイールさせるアニメーションする

clip-pathで画像を切り抜く

https://try-css.vercel.app/clippath/image

f:id:wheatandcat:20220302085555p:plain:w480

clip-pathを使ってデザインしてみる

以下を参考にミニチュアのデザインを作成してみた。

coliss.com

https://try-css.vercel.app/clippath/screen

f:id:wheatandcat:20220302085725p:plain:w480

まとめ

IE11でサポートされていないので、そこだけ注意が必要だけど、 斜めを使用するデザインを1つのcssだけで表現できるので、便利だなと感じた。