[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 in JSとは何か

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

[CSS] カスケードレイヤー(@layer)とITCSSの概念を組み合わせた設計を考える

カスケードレイヤーとは / ITCSS のレイヤー / ITCSS のレイヤーをカスケードレイヤーに落とし込む / 参考

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ