Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Design Tools
CSS Triangle Generator
Build a pure-CSS triangle in any direction and copy the border rules.
Tool Panel
Processed locallyAbout CSS Triangle Generator
Eight orientations drawn with CSS borders alone — no images and no SVG in the output.
- 1
It builds the triangle from **mitred borders**: `width: 0; height: 0` plus two transparent borders and one solid one — the solid border faces away from where the triangle points (a triangle pointing up uses `border-bottom`).
- 2
The four diagonal directions use one solid and one transparent border, letting the 45° mitre line cut a right angle, which lands on the solid side (hence the names: `topLeft` means the right angle sits top-left).
- 3
Base, height and colour are adjustable, and the declarations feed both the preview and the code block — one source, so the two cannot drift apart.
- 1
Pick a direction
Four cardinal directions plus four diagonals; the diagonal cases split the height in half, leaving space above and below.
- 2
Set base and height
The base sets the width of the two transparent borders (half each), while the height is the thickness of the solid border.
- 3
Copy the declarations
You get `width` / `height` and three `border` lines, ready for a pseudo-element or an empty div.
Because it is not a shape but a by-product: the slanted edge comes from the mitre where borders meet, and `border-radius` applies to the box — it rounds the box corners while the slant stays sharp. Use `clip-path: polygon()` (this site has a separate tool for it) or SVG when you need rounded corners.
The border triangle has the best compatibility — every browser understands it, no new features — but it is limited to right and isosceles triangles. `clip-path` handles arbitrary polygons and can clip images, at the cost of weaker support on old browsers. For a decorative arrow, these few bytes of declarations are the cheaper choice.
Related tools
View allDesign Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Design Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools