【CSS】clip-pathを使いこなす！要素を好きな形に切り抜く

1. clip-pathとは？

clip-path はCSSのプロパティの一つで、要素の表示範囲をカスタマイズできる機能です。通常、HTML要素は四角形のボックスで構成されていますが、clip-path を使うことで、要素を円形、三角形、多角形などの形に切り抜くことができます。

2. clip-pathの基本的な使い方

(1) 円形に切り抜く

.circle {
  width: 200px;
  height: 200px;
  background: tomato;
  clip-path: circle(50%);
}

結果:

• 要素が完全な円形に切り抜かれる。
• circle(50%) は、要素の中央を基準に半径50%の円を作る。

(2) 三角形に切り抜く

.triangle {
  width: 200px;
  height: 200px;
  background: deepskyblue;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

結果:

• 三角形の形に要素が切り抜かれる。
• polygon() を使って3つの頂点の座標を指定することで三角形を作成。

(3) 星型に切り抜く

.star {
  width: 200px;
  height: 200px;
  background: gold;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

結果:

• 星の形に要素が切り抜かれる。
• polygon() を使うことで、複雑な図形を作成可能。

3. polygonのルール

polygon() を使うと、自由な形に要素を切り抜くことができます。基本的なルールは以下の通りです。

1. 座標の指定: polygon(x1 y1, x2 y2, x3 y3, ...) のように、各頂点の座標を指定します。
2. 単位: 座標値はピクセル(px)やパーセント(%)で指定可能。パーセント指定の場合、親要素のサイズを基準に計算されます。
3. 頂点の数: 少なくとも3つ以上の頂点を指定する必要があります。
4. 閉じた図形: 最後の点が最初の点に自動的に接続され、閉じた形になります。
5. 時計回りまたは反時計回り: 一般的に、座標は時計回りまたは反時計回りに配置すると意図した形を得やすくなります。

4. 応用編：hoverエフェクトを加える

clip-path を使うと、ホバー時に形を変化させることも可能です。

.button {
  padding: 15px 30px;
  background: dodgerblue;
  color: white;
  font-size: 18px;
  text-align: center;
  display: inline-block;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transition: clip-path 0.3s ease-in-out;
}

.button:hover {
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

結果:

• ボタンにホバーすると、形が変化するアニメーションが発生。

5. clip-pathの活用例

(1) 画像を円形にトリミング

.profile-img {
  width: 150px;
  height: 150px;
  clip-path: circle(50% at center);
}

(2) 斜めにカットしたセクションの作成

.section {
  width: 100%;
  height: 300px;
  background: lightcoral;
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

6. まとめ

clip-path は、CSSの中でも特にデザイン性の高いプロパティです。画像やセクションのカット、ボタンデザインのカスタマイズなど、さまざまな用途に活用できます。polygon() を使えば自由な形を作れるので、ぜひ試してみてください！