4 DirectionsLive PreviewCopy CSS
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #3B82F6;

FAQ

How do CSS triangles work?
CSS triangles use the border trick: set width and height to 0, make adjacent borders transparent, and the remaining border creates a triangle shape.
Which directions are supported?
Up, down, left, and right.
Can I customize the size?
Yes. Use the slider to adjust the triangle size from 10px to 150px.
Share:

About CSS Triangle

What this tool does

Developer and design tools include CSS generators (gradients, shadows, glassmorphism), code playgrounds, color pickers, responsive previews, and reference charts for HTML tags, HTTP methods, and keyboard shortcuts.

Why use this tool

Front-end development involves constant context switching between code and visual output. Having generators and references in a single browser tab speeds up prototyping and reduces the need to search through documentation sites.

How it works

Each tool provides an interactive UI: you tweak parameters (colors, radii, durations), and the tool generates the corresponding CSS, HTML, or SVG code in real time. Copy the snippet directly into your project.

Pro tip

Use the CSS variable output option when available. It makes your generated code theme-friendly and easier to maintain across a design system.

Deep Dive: Related Research

The Complete Guide to CSS in 2026

30,000 words · 65 min read

The Complete SVG Guide 2026: Paths, Shapes, Filters, Animation, Accessibility & Optimization

30,000 words · 60 min read

Explore More

Love this tool? Explore 12467+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools