Privacy Protected

CSS Triangle Generator

Create pure CSS triangles using the border property hack. Customize direction, size, and color.

Direction

Appearance

Preview

CSS Code

width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #6366f1 transparent;

CSS Triangle Border Hack Tool

Generate lightweight CSS triangles without images. Use the classic border technique. Customize direction, size, and color.

1

Choose Direction

Select where the triangle should point.

2

Adjust Size

Set the width and height of the triangle.

3

Pick Color

Choose the color for your UI element.

4

Grab Code

Copy the CSS and paste it into a div.

Before modern CSS properties like clip-path, developers used "border hacks" to create triangles. This method remains widely used for its speed and universal compatibility. Our tool helps you generate the perfect triangle for tooltips, menus, and decorative icons without having to remember the complex border math.

Key Features

All Directions

Choose from 8 distinct pointing directions.

Precise Size

Full control over width, height, and rotation.

Lightweight

Uses no images, just 100% pure CSS.

Visual Preview

See exactly what you're building in real-time.

Frequently Asked Questions

They use the 'border' property hack where three sides are transparent and one is colored with a specific width.

Yes, you can use relative units like percentage or viewport units for the border widths to make them scale.

Yes, you can use the 'transform: rotate()' property to fine-tune the orientation of your triangle.

Last updated on