2022/3/17 （更新日: 2022/3/19）

【CSS】疑似要素を用いた三角形の作り方

CSS

疑似要素を使って三角形ってどう作るの？

そんな疑問にお答えします。

前回の記事ではCSSで三角形を作る方法を解説しました。

CSSのみで三角形を作る方法

今回は具体的な使い方を紹介します。

1 疑似要素を用いて三角形を作る
2 吹き出しパターン
3 矢印パターン
4 ラベルパターン

疑似要素を用いて三角形を作る

今回紹介するのは次の3パターンです。

疑似要素を用いた三角形の作成例

吹き出しなどで出てくるパターン1、矢印やフローなどで出てくるパターン2、ラベルのパターン3といずれもよく目にするパターンです。

これらすべてに共通しているのは、疑似要素を用いて三角形を作っているところです。

それぞれのコードを見てみましょう。

吹き出しパターン

See the Pen
三角形疑似要素1 by toshi (@toshi78)
on CodePen.

.triangle01{
  position: relative;
  background: #00CC99;
  color: #fff;
  padding: 20px;
  border-radius:3px;
}

.triangle01::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 30px;
  width: 0;
  height: 0;
  border-top: 10px solid #00CC99;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

/* 下向きの三角形 */
width: 0;
height: 0;
border-top: 10px solid #00CC99;
border-right: 10px solid transparent;
border-left: 10px solid transparent;

上記の部分が三角形のCSSです。

これをposition「relative」「absolute」を使って任意の位置へ配置します。

「bottom: -10px;」は三角形の高さ分を下げています。

position「relative」「absolute」の理解がまだの方は先にこちらをご覧ください。

【初心者】position「relative」「absolute」を理解する方法

矢印パターン

See the Pen
三角形疑似要素2 by toshi (@toshi78)
on CodePen.

.triangle02 {
  position: relative;
  width: 100px;
  height: 80px;
  background: #00CC99;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle02::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid #00CC99;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
}

こちらも先ほどのパターンとやっていることは同じです。

「right: -20px;」で三角形がぴったりと四角形にくっつきます。

ラベルパターン

See the Pen
三角形疑似要素3 by toshi (@toshi78)
on CodePen.

.triangle03 {
  position: relative;
  width: 400px;
  height: 200px;
  background: #00CC99;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.triangle03::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 80px solid transparent;
  border-left: 80px solid #ff8c00;
  z-index: 100;
}

.triangle03::after {
  content: "ラベル";
  position: absolute;
  top: 15px;
  left: 0;
  transform: rotate(-45deg);
  color: #fff;
  z-index: 200;
}

position「relative」「absolute」を使うところは上のパターンと同じです。

こちらは疑似要素のbefore、after両方を使います。

beforeで三角形を配置、afterでラベルの文字を配置しています。

文字を斜めに配置するために「transform: rotate(-45deg);」としています。

こうしてみると一見複雑そうに見えるデザインも意外と単純な構成であることがわかると思います。

三角形さえ作れればあとはposition「relative」「absolute」で動かせば完成です。

実際にいくつか作ってみて自分の手の内に入れておきましょう。