ifBuyz Tools
デザイン

CSS三角形ジェネレーター

入力

方向、底辺の幅、高さ、色を設定してください。

方向
Base Width60px
高さ80px

生成された CSS をコピーして空の要素に適用してください。

出力

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid #6366f1;
}

よくある質問

CSS三角形はどう作りますか？
幅高さ0要素のborderを利用し、1辺のみ色を付けて表現します。
SVGではなくCSS三角形を使う場面は？
ツールチップの矢印など単純形状で軽量実装したい場合です。
中央配置のコツは？
親relative＋子absoluteで50%配置し、transformで補正します。