CSS三角形生成器
用零尺寸元素和CSS边框生成上／下／左／右及四个角共8种三角形，可调底边、长度和颜色，实时预览并复制HTML／CSS。
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.