【初心者向け】CSSのclip-pathで図形を描画してみよう！

2023年9月16日2023年11月16日

webエンジニアの皆さん、こんにちは！今回はCSSの強力なプロパティであるclip-pathについて、基本の使い方から応用方法までを解説します。

clip-pathを使いこなせれば、ウェブページに魅力的でユニークなデザインを追加できるようになりますよ。

1. clip-pathとは何か？

clip-pathプロパティは、要素の可視部分をクリップするために使用されます。

基本的な形状から複雑なカスタムパスまで、非常に多岐にわたる効果を作成できるのが特徴です。

【基本形状のクリッピング】

こちらのように、基本的な形状を簡単にクリップすることができます。

.element {
  clip-path: circle(50% at 50% 50%);
}

2. カスタムクリップパスの作成

【SVGを使用したカスタムクリップ】

SVGファイルを組み合わせると、より複雑な形状のクリップパスを作成可能です。

こちらでは、カスタムの三角形を定義しています。

<svg width="0" height="0">
  <defs>
    <clipPath id="custom-clip" clipPathUnits="objectBoundingBox">
      <path d="M0.5,0.1 L0.9,0.9 L0.1,0.9 Z" />
    </clipPath>
  </defs>
</svg>

<style>
  .element {
    clip-path: url(#custom-clip);
  }
</style>

3. アニメーションとトランジション

【動的なビジュアル効果】

clip-pathはアニメーションと組み合わせて使用することもできます。

こちらの例は、ユーザーが要素をホバーするとクリップが変更されるシンプルな効果です。

.element {
  clip-path: circle(50% at 50% 50%);
  transition: clip-path 0.3s ease;
}

.element:hover {
  clip-path: circle(100% at 50% 50%);
}

4. レスポンシブデザインとの統合

【デバイス間で異なるクリッピング】

clip-pathをメディアクエリと組み合わせると、異なるデバイスや画面サイズに対しても適切なクリッピングを行うことができます。

@media (max-width: 600px) {
  .element {
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
  }
}

5. 応用例: テキストリベールエフェクト

こちらはclip-pathの応用例の一つです。

テキストが下からリベールされるエフェクトも、以下のように簡単に実行できます。

<div class="reveal-text">
  ホバーしてください
</div>

.reveal-text {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.reveal-text::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: black;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  transition: clip-path 0.3s ease;
}

.reveal-text:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}