CSS Triangle Generator
NewGenerate pure CSS triangles using the border trick, with live preview.
Controls
Adjust direction, size, and color.
Live Preview
Border trick and clip-path output side by side.
Border trick
Clip path
Border CSS
Clip-path CSS
Frequently Asked Questions
Why does this tool give me both a border CSS snippet and a clip-path snippet?
They solve the same triangle in two different ways. The border version uses the classic zero-width/zero-height border trick, while the clip-path version creates a real box with width, height, background, and a polygon shape.
Can I make diagonal corner triangles like top-left or bottom-right?
Yes. The direction picker includes top-left, top-right, bottom-left, and bottom-right, and the border output switches to one colored border plus one transparent border for those corner shapes.
Why can odd widths look a little uneven in the border version?
The border trick splits the width or height into rounded halves before building the transparent borders. If you use odd numbers, one side can effectively round by 1px.
Do I need to click Generate every time I change a value?
No. This tool updates live on input and change events, so the preview and both code blocks refresh as you edit. The copy button just copies the current border and clip-path snippets together.
What color formats can I type into the color box?
The text field only accepts hex colors in #RGB or #RRGGBB form. If the value is invalid, the tool falls back to the current color picker value instead of keeping the bad input.