CSS Triangle Generator

Generate pure CSS triangles (no images, no SVG) in 8 directions. Customize size and color, copy code for tooltips, arrows, and speech bubbles.

All processing happens locally in your browser — nothing is uploaded
方向
尺寸80px
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 112px solid #6366f1;

Design Tools · Related Tools

View all 15 tools →
CSS Box Shadow

Visual box-shadow editor
CSS Gradient

Gradient color editor
CSS Border Radius

border-radius tweaker
CSS Glassmorphism

backdrop-filter editor
CSS Flexbox

Visual flex layout
CSS Grid

Visual grid layout