初めまして！watnowのゆいです

watnow Advent Calendar 2024 の19日目を担当させていただきます！

今年の夏に初心者ながら初めてwatnowハッカソンに参加しました！
そこで私が学んだclip-pathについて書かせていただきます
記事を書くことも初めてなので、至らぬ点も多いと思いますが、読んでいただけたら嬉しいです

はじめに

watnowハッカソンに参加した際、画像を食パンの型に切り抜く方法が分かりませんでした。丸や四角などの型は私もしたことがあったのですが、食パンの形はどうすればいいのか困りました。そこで見つけたのがclip-pathを使う方法でした！この方法を使うことにより食パンの形だけでなく、様々な複雑な形に切り抜くことができると考えられます

clip-pathとは

clip-pathとは「要素を任意の形に切り取る」ことです。

今回私が紹介するのは、path()を使って任意のエリアを切り抜く方法です

1.切り抜く形のSVGを作る

今回は私がハッカソンの際に使用した方法で紹介していきます！

こちらはFigma（web上で簡単にデザインができるツール）で作成しました！
画像の大きさも自由自在に変形できるので便利でした

作成した後にSVG形式でダウンロードします。

2.clip-pathで画像を指定していく

先ほどダウンロードしたSVGをVSCodeで確認します

vector.svg

<svg width="319" height="229" viewBox="0 0 319 229" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M63.8 229C55.0275 229 47.5177 226.778 41.2706 222.334C35.0235 217.889 31.9 212.547 31.9 206.306L31.9 84.5348C22.0642 80.3742 14.2885 74.8426 8.57312 67.9398C2.85771 61.0371 0 53.5198 0 45.3878C0 32.9062 6.24708 22.2211 18.7413 13.3327C31.2354 4.44422 46.255 0 63.8 0L255.2 0C272.745 0 287.765 4.44422 300.259 13.3327C312.753 22.2211 319 32.9062 319 45.3878C319 53.5198 316.142 61.0371 310.427 67.9398C304.711 74.8426 296.936 80.3742 287.1 84.5348V206.306C287.1 212.547 283.977 217.889 277.729 222.334C271.482 226.778 263.973 229 255.2 229L63.8 229Z" fill="#1C1B1F"/>
</svg>

そして必要となる部分をコピーします

vector.svg

"M63.8 229C55.0275 229 47.5177 226.778 41.2706 222.334C35.0235 217.889 31.9 212.547 31.9 206.306L31.9 84.5348C22.0642 80.3742 14.2885 74.8426 8.57312 67.9398C2.85771 61.0371 0 53.5198 0 45.3878C0 32.9062 6.24708 22.2211 18.7413 13.3327C31.2354 4.44422 46.255 0 63.8 0L255.2 0C272.745 0 287.765 4.44422 300.259 13.3327C312.753 22.2211 319 32.9062 319 45.3878C319 53.5198 316.142 61.0371 310.427 67.9398C304.711 74.8426 296.936 80.3742 287.1 84.5348V206.306C287.1 212.547 283.977 217.889 277.729 222.334C271.482 226.778 263.973 229 255.2 229L63.8 229Z"

必要となるのは上記の＜path＞タグの「M ~ 」です。

次にこのコピーしたコードを使用するためのコードを書いていきます。

まずtsxのコードです。

page.tsx

 <Image
   className={styles.image}
   src={xxx.imagePath}
   alt={xxx.title}
   width={319}
   height={229}
 />

注意
この時の width と height は先ほどの svg の width と height に合わせてください

次にcssのコードです

この時にclip-pathを指定し、そこにさきほどコピーした「M ~ 」を貼り付けてください

page.css

.post {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: path(
    "M63.8 229C55.0275 229 47.5177 226.778 41.2706 222.334C35.0235 217.889 31.9 212.547 31.9 206.306L31.9 84.5348C22.0642 80.3742 14.2885 74.8426 8.57312 67.9398C2.85771 61.0371 0 53.5198 0 45.3878C0 32.9062 6.24708 22.2211 18.7413 13.3327C31.2354 4.44422 46.255 0 63.8 0L255.2 0C272.745 0 287.765 4.44422 300.259 13.3327C312.753 22.2211 319 32.9062 319 45.3878C319 53.5198 316.142 61.0371 310.427 67.9398C304.711 74.8426 296.936 80.3742 287.1 84.5348V206.306C287.1 212.547 283.977 217.889 277.729 222.334C271.482 226.778 263.973 229 255.2 229L63.8 229Z"
  );
  /* SVGのclipPathを指定 */
}

これで以上になります！

今回の完成形はこんな感じになります！（画像はフリー素材です）

clip-path と svg を使用することにより、画像を様々な形に切り取ることができます

おわりに

ここまでご覧いただきありがとうございます
至らぬ点が多いと思いますが試してくださったら嬉しいです
初めての記事で分からないことだらけでしたが、楽しんで書くことができました！
他にもおすすめの方法があったら教えていただきたいです！

まだまだ初心者なのでこれからも頑張ります
おわりです！ありがとうございました～！

参考

・【HTML/CSS】もっと詳しくclip-path！図形を作ったり画像を切り抜いたりが簡単に！
https://spicaweblog.com/2022/06/clippath/