[CSS] border使clip-path三角作る

2 min read

背景

これまで CSS だけを利用して三角形を作る際は border を利用することが多かった。

/* 縦横 100px の三角形を作成する */
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid var(--color);
}

border を利用した実装だと何を表現しているのか一見してもわかりづらい。

実装方法

borderではなく、clip-pathプロパティにpolygon()関数を利用する。

サンプル

/* 縦横 100px の三角形を作成する */
.triangle {
  height: 100px;
  width: 100px;
  background: var(--color);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

種別

上向き

.triangle {
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

下向き

.triangle {
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

右向き

.triangle {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

左向き

.triangle {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

参考

このページをシェアする

Related Articles

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

[CSS] ダークモードを有効化しない方法

背景 / 方法 / 参考

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / Footnotes