A centered tooltip pointer
An upward triangle 160px wide and 120px high at 50% uses left and right transparent borders of 80px and a colored bottom border of 120px.
Triangle settings
For up/down triangles, apex position runs left to right. For left/right triangles, it runs top to bottom. At 0% or 100%, one transparent border becomes zero and the triangle forms a right-angle corner.
Border triangle preview
The CSS element has zero content width and height; its colored border creates the visible triangle. The exported rule includes the zero dimensions, solid borders, and transparent sides required for the shape.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the CSS Triangle Generator
- 01
Choose whether the triangle points up, right, down, or left.
- 02
Set visual width, visual height, and fill color.
- 03
Move the apex percentage to make the triangle symmetric or skewed.
- 04
Toggle the bounding guide to inspect the shape, then copy or download CSS.
Examples
A right-angle wedge
Set the apex to 0% or 100% to bring it to an endpoint of the base. One transparent border becomes zero, forming a right-angle triangle.
Why a zero-size box has visible area
The content box is zero by zero, but borders still occupy space. Border joins form triangles. Coloring just one border and making the neighboring borders transparent reveals the desired wedge. The colored border is opposite the direction the triangle points.
Measure the visible result
For up and down directions, the horizontal borders split the visual width and the colored border supplies height. For left and right directions, the vertical borders split height and the colored border supplies width. Apex percentage moves along the base, measured left to right or top to bottom.
Common questions
Can I put text inside this triangle?
The border triangle has no content area. Use a positioned wrapper or a separate label if it needs text.
Why do I see a faint edge?
Border antialiasing can vary by browser, device scale, and fractional border widths. Check the shape at its final size and on its final background.
Can this make any polygon?
No. This tool generates a single triangular border shape. Use SVG or clip-path for more complex geometry, arbitrary outlines, or detailed shape control.