a11y.skipToMainContent
1

CSSトライアングルジェネレータ

境界線のトリックでピュアCSSの三角形を生成する — 方向、サイズ、色を選択し、CSSをコピーします.

px
px

Diagonal (corner) triangles are right-angled and ignore the separate height value, using the width for both sides.

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Triangle Generator

  1. 方向の選択 — 上下左右、または四角の1つを選択します.
  2. 三角形のベースとポイントを制御する幅と高さを設定します.
  3. 三角形の目に見える側面の塗りつぶし色を選択します.
  4. CSSをコピーして、幅、高さ、境界宣言をコピーします.

CSSトライアングルジェネレータとは?

純粋なCSSの三角形はゼロサイズの要素の厚い境界を与え、transparentの3つを作ることによってなされます。 色の境界線が透明なものを満たしているところ、対角の継ぎ目は三角形を形成します。画像やSVGは必要ありません。

このジェネレータは、あなたのための数学を処理します。 8つの方向(4つの側面と4つの右角の角の角)のいずれかを選択し、width、heightと色を設定し、結果の幅をコピーします。 0;とは、スタイルシートに直接宣言します。

Advertisement

FAQ

CSS 境界三角形のトリックはどのように機能しますか?
幅0と高さ0の要素は、45度の対角継ぎで満たす境界線をレンダリングします。 一方の境界線を着色し、他の3つの透明な葉を単一の三角形の形にし、その点は色面の反対に残します.
なぜ角の三角形は右角ですか?
斜角方向の方向は2つの隣接する境界だけを使用するので、三角形はそれらの境界が会う正方形の角を持っています。 両側が同じ境界線幅から来るので、角の三角形は両脚の幅値を使用し、別々の高さを無視します.
三角形のサイズを変更するにはどうすればよいですか?
幅と高さを調節します。より大きな色の境界線は、その方向に三角形を長くしますが、透明な境界線はベースの幅を設定します。 ツールは、スライダーをドラッグすると、境界値を更新します.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Triangle Generator on Wikipedia·Developer Tools on Wikipedia·CSS Triangle Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement