カテゴリー
お問い合わせ

三角形も簡単！モダンCSS clip-path を使った直感的な図形作成と画像切り抜き

HTML/CSS
目次

Webサイトのデザインで「三角形の矢印」や「斜めに切り取られた背景」などを作りたい時、皆さんはどうやって実装していますか？

ひと昔前は、CSSで三角形を作るために border プロパティの透明な枠線を組み合わせる、いわゆる「borderハック」という少しトリッキーな手法が主流でした。 しかし、この方法はコードをパッと見ただけでは「なぜこれで三角形になるのか」が分かりづらく、さらに「背景に画像を指定できない」といった致命的な弱点がありました。

clip-path なら直感的で自由自在！
現在のモダンCSSでは、clip-path というプロパティを使うのが主流です。要素を好きな形に「切り抜く」ことができるため、直感的な座標指定で図形を作れるだけでなく、背景に画像やグラデーションを敷くことも簡単にできます！

今回は、そのまま使える「clip-path を使った実用的な図形スニペット3選」をご紹介します！

デモ動作

See the Pen clip-path 図形3種類 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-container">
  <h2>clip-pathで作る図形コレクション</h2>
  
  <div class="grid">
    <div class="p-shape-wrapper">
      <div class="p-shape p-shape--triangle"></div>
      <p>三角形</p>
    </div>

    <div class="p-shape-wrapper">
      <div class="p-shape p-shape--circle"></div>
      <p>円形</p>
    </div>

    <div class="p-shape-wrapper">
      <div class="p-shape p-shape--parallelogram"></div>
      <p>平行四辺形</p>
    </div>
  </div>
</div>

【CSS】

.grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* 図形共通のベーススタイル（背景にグラデーションを指定） */
.p-shape {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #1bb4d4, #fce621);
  margin-bottom: 16px;
}

/* =========================================
   clip-pathでの図形作成
========================================= */

/* ① 三角形 (polygon: 頂点のX・Y座標をカンマ区切りで指定) */
.p-shape--triangle {
  /* 上中央(50% 0), 右下(100% 100%), 左下(0 100%) */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* ② 円形 (circle: 半径 at 中心のX・Y座標) */
.p-shape--circle {
  clip-path: circle(50% at 50% 50%);
}

/* ③ 平行四辺形 */
.p-shape--parallelogram {
  /* 右上を少し削り、左下も少し削る */
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

コードの解説・こだわったポイント

polygon() で自由な多角形を作る

三角形や平行四辺形を作っている clip-path: polygon(...) は、グラフの座標のように「頂点のX座標 Y座標」を指定して、それらを直線で結んで切り抜く機能です。 polygon(50% 0%, 100% 100%, 0% 100%) であれば、「上の中央」「右下」「左下」の3点を結んだ三角形になります。

背景画像やグラデーションもそのまま使える！

昔の borderハック との最大の違いはこれです！ border（枠線）で図形を作ると、背景に写真やグラデーションを入れることが非常に困難でした。しかし clip-path は「要素そのものを切り抜く」仕様なので、今回のデモのように背景に鮮やかなグラデーションを敷いたり、<img> タグの写真をそのまま円形や三角形に切り抜いたりといったことが簡単にできます。

便利ツール：CSS clip-path maker
polygon() の座標を頭の中だけで計算するのは大変です。制作時には、ブラウザ上で図形をドラッグして直感的に clip-path のコードを生成してくれる 「Clippy」 などのジェネレーターツールを使うのが一般的で、圧倒的に効率的です！
・Clippy — CSS clip-path maker

補足：参考リンク

今回も公式ドキュメントと対応ブラウザの情報を載せておきます！ clip-path はモダンブラウザで幅広くサポートされています。

・MDN: clip-path
・Can I Use: clip-path

まとめ

今回は、モダンCSSの clip-path を使って、かつての borderハック から脱却する直感的な図形作成の方法をご紹介しました。

「三角形を作るならこのコード」というように丸暗記するのではなく、「座標を指定して要素を切り抜いている」という本質的な仕組みを理解しておくことで、デザインの幅がグッと広がります。

便利なジェネレーターツールなども活用しながら、保守性が高く、かつ表現力豊かなモダンなコーディングを引き続き目指していきたいと思います！

Prev
Next

関連記事