CSS Triangle Generator

Create pure CSS triangles using border techniques

100x100px

clip-path

CSS Geometric Shape Canvas

Color:

Generated CSS & Tailwind Output

Pure CSS Rule

width: 100px;
height: 100px;
background-color: #3b82f6;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Tailwind CSS Class

w-[100px] h-[100px] bg-[#3b82f6] [clip-path:polygon(50%_0%,_0%_100%,_100%_100%)]

Direction & Dimensions Configuration

Technique:

Triangle Direction

Width:100px

Height:100px

CSS Triangle Generator

CSS Geometric Shape Canvas

Generated CSS & Tailwind Output

Direction & Dimensions Configuration

CSS Clip-Path Geometric Shapes Catalog

CSS Triangle Generator

CSS Geometric Shape Canvas

Generated CSS & Tailwind Output

Direction & Dimensions Configuration

CSS Clip-Path Geometric Shapes Catalog