CSS Triangle ジェネレーター
「CSS Triangle ジェネレーター」はコード、データと QRに使えるブラウザツールです。入力内容と結果は通常この端末内で処理され、登録は必要ありません。
LIVE PREVIEW
Up triangle
The visible shape is made by borders on a zero-width, zero-height element. Its transparent borders make the other sides disappear.
使い方
使い方
- Choose up, down, left, right, or a corner direction.
- Set the base width, height, and color while checking the live preview.
- Copy the HTML and CSS, then set responsive border values in your own stylesheet when needed.
Why a zero-size element becomes a triangle
The generated element has width: 0 and height: 0. Borders meet at its center, so a colored border appears as a triangular wedge. The other borders use transparent color: they still occupy space and define the triangle edges, but they are not visible.
Direction, base, and height
Up and down triangles use equal left and right transparent borders for the base. Left and right triangles use equal top and bottom transparent borders. Corner presets use one colored border and one transparent border, producing a right triangle. The controls use practical 8–240px limits so the local preview stays readable.
Responsive boundaries
Border widths are fixed pixel lengths in the copied rule; they do not automatically scale with their parent. For responsive layouts, place the values in CSS custom properties or use media queries and clamp() around the surrounding layout. Check nearby text, focus rings, hit areas, zoom, and narrow screens before treating a decorative triangle as an interactive target.
よくある質問
あわせて知りたいこと
Why are some borders transparent instead of omitted?
Transparent borders keep their geometry. Their equal widths create the two sloped sides while the colored border remains visible as the triangle.
Can I use this for a speech-bubble pointer?
Yes. Position the generated decorative element beside a bubble and ensure it does not cover readable content or a control’s focus indicator.
Does this create SVG or a polygon?
No. It generates ordinary HTML and CSS borders. Use SVG or clip-path when you need more complex geometry, strokes, or scalable path editing.