مولد مثلث CSS

Create pure CSS triangles using the border trick. Choose direction, size, and color.

Direction

Width (px)

100px

Height (px)

100px

Color

CSS Code

How CSS Triangles Work

CSS triangles are created by setting the element's width and height to 0 and using thick borders. By making three of the four borders transparent and coloring one, you get a triangle shape pointing in the desired direction. This classic CSS trick is supported in every browser.

When should I use CSS triangles?

CSS triangles are useful for tooltips, dropdown arrows, breadcrumbs, and decorative elements. They're lightweight and don't require images or SVGs.

Related Tools

CSS Clip Path Generator

Create clip-path shapes visually.

Box Shadow Generator

Visual box-shadow builder.

CSS Gradient Generator

Create CSS gradients visually.