🔺

CSS Triangle Generator

Visual CSS triangle generator with custom direction, size, color, and rotation.

Preview

Tip: Easily create triangles using CSS border properties.
Width100px
Height100px
Rotation0°
Color

CSS Code

width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px 50px;
border-color: transparent transparent #3b82f6 transparent;

About This Tool

The CSS Triangle Generator is an online tool dedicated to creating pure CSS triangle styles. Triangles are widely used in web design for speech bubbles, dropdown arrows, breadcrumbs, etc. With this tool, you don't need to manually write complex border properties. Simply set parameters like direction, size, color, and rotation via intuitive controls to get real-time CSS code. The generated code is compatible with all major browsers, making it an essential tool for frontend developers.

Features

  • 🔄 8 Directions: Supports Top, Bottom, Left, Right, and 4 diagonals
  • 🎨 Full Customization: Precise control over width, height, and color with color picker & HEX input
  • 📐 Rotation: Support 0-360 degree arbitrary rotation
  • ⚡ Real-time Preview: WYSIWYG, see changes instantly with checkerboard background
  • 📋 One-click Copy: Clean and standard CSS code ready to copy with visual feedback
  • 🎲 Random Generation: One-click random triangle with varied direction, size, color, and rotation
  • 🛡️ Pure CSS: No images required, faster loading and better performance
  • ⌨️ Keyboard Navigation: Arrow keys to quickly switch directions, accessibility-friendly

Recommended Tools

12 items
🎨

CSS Fancy Border Radius Generator

8-point control for organic shapes and fancy border-radius.
🎨

CSS Gradient Generator

Visual CSS gradient generator with multi-color, Tailwind support and real-time preview.
▦

CSS Grid Generator

Visual CSS Grid generator, create complex 2D layouts easily.
🧩

XML Formatter

All-in-one XML beautifier, minifier, and validator for clean output.
✅

JSON Validator

Real-time JSON validation with precise error location, formatting, and download.
🧲

URL Extractor

Batch extract URLs with de-duplication, sorting, and protocol completion.
🌐

HTML Formatter & Minifier

One-click HTML beautification and minification for better readability and performance.
📈

UTM Builder

Generate UTM tracking URLs with existing and custom params preserved.
🗄️

SQL Formatter

Online SQL formatter and minifier supporting multiple dialects.
🌘

CSS Box Shadow Generator

Visual CSS box-shadow generator with multi-layer support, Tailwind and real-time preview.
⌨️

Keyboard Key Code Info

Real-time keyboard event detector showing keyCode, key, code, and more.
💻

MAC Address Generator

Batch generate MAC addresses with custom prefix, format, and case.