Direction
top / 20px
Output
border-bottom-color: #...
Design Tools
CSS Triangle Generator with Live Preview
Choose a direction, size, and color to generate a pure CSS border triangle with a live preview and copyable code.
CSSTriangleShape
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Triangle Generator
Choose a direction, size, and color to generate a pure CSS border triangle with a live preview and copyable code.
最终边框魔术 (CSS)
Use cases
- Create an arrow for a tooltip or popover
- Generate a corner badge decoration
- Test CSS border triangle dimensions
How to use
- Choose the triangle direction
- Set width, height, and color
- Preview and copy the CSS
Example input and output
FAQ
How does a CSS border triangle work?
The element has zero width and height. Colored and transparent borders combine to form the visible triangle.
Can it create irregular polygons?
This tool generates standard directional triangles. Use a clip-path tool for more complex polygons.
Tools
Related tools
Continue with another translated tool for a nearby task.
CSS Clip Path
CSS Clip Path — Shape Generator
Generate CSS clip-path shapes from presets and simple controls with a live preview—useful for angled cards, badges, image crops, and decorative layouts.
CSS clip-path Shape
CSS Ribbon Generator
CSS Ribbon Generator — Corner Badge Styles
Visually generate tilted corner-ribbon CSS for cards. Change text, colors, offset, width, and font size for sale, sold-out, and similar status badges.
CSS Badge Ribbon