CSS Triangle Generator
// Generate CSS triangles using borders
.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #06b6d4;
}#About CSS Triangle Generator
Free online CSS triangle generator. Create triangles pointing in any direction using the CSS border technique with live preview. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
#FAQ
How does the CSS triangle technique work? ▾
CSS triangles are created by setting an element to zero width and height, then using transparent borders on three sides and a colored border on the fourth side.
What directions are supported? ▾
You can generate triangles pointing up, down, left, or right by changing which border is colored.
</> Embed this tool ▾
Copy this code to embed the tool on your website. Adjust the height to fit your layout.
<iframe src="https://www.browserutils.dev/embed/css-triangle-generator" width="100%" height="500" frameborder="0" title="CSS Triangle Generator"></iframe>