2024年2月29日(木)2024年2月25日(日) 投稿者: iwbjp

CSSで三角形や斜め背景色はborderではなくclip-pathを使用する

CSSのborderで三角形を実装
CSSのclip-pathで三角形を実装
斜め背景色もclip-pathを使用する

CSSのborderで三角形を実装

CSSで三角形を実装する方法はいくつかありますが、そのうちの1つはborderプロパティを使用する方法です。

以下のようにborderを指定することで三角形が作成できます。

/* 20x20の三角形 */
.triangle-border {
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #CC0000;
}

しかし、borderは文字通り枠線のためのCSSプロパティなので、三角形を作成するためのものではありません。

そのため、borderだと形、色、サイズなどを柔軟に実装できません。

CSSのclip-pathで三角形を実装

CSSのclip-pathプロパティを使用すれば、borderよりも簡単に三角形が作成できます。

作り方はまず、要素に縦横のサイズと背景色を指定します。

.triangle-clip {
  width: 20px;
  height: 20px;
  background: #CC0000;
}

次にclip-pathプロパティの値にpolygonで座標を3つ指定して切り抜けば三角形になります。

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

borderと違ってwidthとheightでサイズを指定するので、サイズ調整がborderよりしやすいです。

clip-pathなら複雑な形状と色の三角形も作成できます。

.triangle {
  --r: 2px;
  --_g:calc(tan(60deg)*var(--r)) left var(--r),#000 98%,#0000 101%;
  width: 20px;
  height: 20px;
  mask:
    conic-gradient(from 60deg at calc(3*var(--r)/2 - 100%),#000 60deg,#0000 0)
    0 0/calc(100% - 3*var(--r)/2) 100% no-repeat,
    radial-gradient(var(--r) at calc(100% - 2*var(--r)) 50%,#000 98%,#0000 101%),
    radial-gradient(var(--r) at top    var(--_g)),
    radial-gradient(var(--r) at bottom var(--_g));
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background: linear-gradient(45deg, #FA6900, #C02942);
}

このような複雑な三角形の場合はジェネレーターを使うと簡単に作成できます。

CSS Generators: Triangle Shapes

斜め背景色もclip-pathを使用する

Webサイトで使用されていることがある、斜めの背景色もborderで作られていることがありますが、clip-pathを使用したほうがより柔軟に制作できます。

clip-pathを使用する際は要素を以下のように、clip-pathのpolygonで4点を指定して、切り抜いて作成すると、斜めの背景色部分の角度が画面幅によって変わってしまうので、この方法で作成するのは避けてください。

body {
  background: orange;
}

.content-ng {
  padding: 1em 1em 2em 1em;
  font-size: 2em;
  background: cyan;
  clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 0);
}

この方法だとデザインの見た目が変わりますし、間違えてclip-pathで意図せず要素内の画像やテキストを切り抜いてしまうリスクもあります。

clip-pathの斜め背景色NGサンプル

斜め背景色を実装には、::after疑似要素を使用してコンテンツの下に大きな三角形を挿入する方法もあります。

body {
  background: orange;
}

.content {
  position: relative;
  margin-bottom: calc(10vw + 20px);
  padding: 1em 1em 0 1em;
  background: cyan;
  font-size: 2em;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10vw;
    width: 100%;
    height: 10vw;
    clip-path: polygon(0 0, 0 100%, 100% 0%);
    background: cyan;
  }
}