CSS Triangle Generator
Preview
Direction
Top Left
Options
CSS
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 0;
border-color: #000000 transparent transparent transparent;Comments
Similar Coding Tools
See AllCSS Box Shadow Generator
Generate and preview CSS box-shadow effects for boxes, circles or headers.
CSS Border Radius Generator
Create advanced CSS border-radius values to control each corner individually.
CSS Clip Path Generator
Generate CSS clip-path shapes with multiple patterns and use them in your projects.
What is CSS Triangle Generator?
CSS Triangle Generator creates triangle shapes using the border method: an element with zero width and height and solid borders, where one border is colored and the others transparent. You choose direction, size (width and height), and color, then copy the generated CSS.
Use "Custom" to set Top and Bottom border widths (or left/right for up/down triangles) for asymmetric triangles.
How to create CSS triangles?
Follow these steps:
- 1
Select a direction (up, down, left, right, or diagonal).
- 2
Set Triangle Color and Width/Height (px) for size.
- 3
Optionally enable Custom and set Top (px) and Bottom (px) for asymmetric triangles.
- 4
Copy the generated CSS and paste it into your stylesheet.