【CSS】【三角形】clip-pathの使い方 – borderは使わずpolygon,circleで多様な形を切り取る方法と実例

2024年9月15日

皆さんこんにちは！IWACODEの岩村です。

CSSのclip-pathプロパティを使うと、画像や要素をさまざまな形に切り取ることができます。borderプロパティでも三角形を作ることはできるんですが、少し手間がかかるのと少々わかりにくいところがあります。
clip-pathを使うともっと簡単に、そして柔軟に形を作ることができるので、特に三角形や直角三角形をデザインに取り入れたいときにはおすすめです。

本記事では、clip-pathを使って基本的な三角形から少し変わった形状までを作る方法を紹介し、それらを実際のデザインにどのように応用できるかも解説していきます。WEBデザインにちょっとしたアクセントを加えたい方には、clip-pathはとても便利なプロパティです。

さまざまな形の作り方と、その活用法をご覧ください！

clip-pathとは？

clip-pathは、要素の表示領域を指定するCSSプロパティです。形状を定義することで、その形に合わせて要素をクリップ（切り取り）できます。

clip-pathを使うことで、単純な四角形以外の形状をCSSだけで実現できます。

clip-pathで作る基本的な形

三角形の作成

三角形を作成する最も簡単な方法の一つがclip-pathを使うことです。まずはclip-pathを使った三角形の作成方法を見てみましょう。

<!-- 三角形 -->
<div class="triangle"></div>

.triangle {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

コードの解説

clip-path: polygon()を使って三角形の頂点を指定しています。polygon関数の引数は、要素内の各頂点の位置を示します。この例では、3つの頂点が指定されています。

50% 0%：要素の上部中央を示します（x軸の50%、y軸の0%）
0% 100%：要素の左下を示します（x軸の0%、y軸の100%）
100% 100%：要素の右下を示します（x軸の100%、y軸の100%）

応用形の作成

直角三角形

直角三角形もclip-pathを使って簡単に作成できます。

<!-- 直角三角形 -->
<div class="right-triangle"></div>

.right-triangle {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

コードの解説

この例では、3つの頂点を以下のように指定しています。

0 0：要素の左上を示します（x軸の0、y軸の0）
100% 100%：要素の右下を示します（x軸の100%、y軸の100%）
0 100%：要素の左下を示します（x軸の0、y軸の100%）

台形

台形もclip-pathを使って簡単に作成可能です。

<!-- 台形 -->
<div class="trapezoid"></div>

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
}

実用例

カスタム形状の画像切り取り

円形

clip-pathを使うと、画像を任意の形状にクリップすることが可能です。例えば、プロフィール写真を円形することもできます。

<!-- 円形（プロフィール画像の例） -->
<div class="profile-image"></div>

.profile-image {
  width: 150px;
  height: 150px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  clip-path: circle(50%);
}

多角形

頂点を増やすことで以下のように多角形も作成することが可能です。

<div class="hexagon"></div>

.hexagon {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  clip-path: polygon(
    /* 上辺中央 */
    50% 0%,
    /* 右上 */
    100% 25%,
    /* 右下 */
    100% 75%,
    /* 下辺中央 */
    50% 100%,
    /* 左下 */
    0% 75%,
    /* 左上 */
    0% 25%
    );
}

三角形で吹き出しを実装

吹き出しの角の部分を疑似要素を使用して作成しております。

positionプロパティにて三角形の位置を調整することで吹き出しのデザインを実現しています。

positionプロパティの指定によっては右側に角を付けることも可能です。

<div class="speech-bubble">吹き出しを作成</div>

/* 吹き出しの本体部分 */
.speech-bubble {
  position: relative;
  background-color: #f0f0f0;
  padding: 1em;
  border-radius: 10px;
  width: fit-content;
  text-align: center;
  border: 1px solid #f0f0f0;
}

/* 三角形の部分 */
.speech-bubble::after {
  content: "";
  display: block;
  background-color: #f0f0f0;
  position: absolute;
  inset: 100% 0 auto 0;
  margin-inline: auto;
  width: 30px;
  height: 30px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}