Skip to main content
Penguin ToolsPenguin Tools

CSS Triangle Generator

Generate CSS triangles using the border property. Supports all 8 directions with customizable size and color.

Direction

10px200px
10px200px

Preview

CSS code

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3B82F6;
Share this tool
📖

How to Use

Step 1

Choose Direction

Choose Direction

Select triangle direction

Step 2

Adjust Size

Adjust Size

Adjust size and color

Step 3

Copy

Copy

Copy CSS code for use

✨

Features

8 Directions

Triangles in 8 directions including diagonals

Custom Size

Specify width and height independently

Live Preview

Changes reflected in preview in real time

❓

FAQ

Uses CSS border widths to draw triangle shapes.

🔗Related Tools

🎨
Design Tools

Color Code Converter

Convert between HEX, RGB, and HSL color codes. Use the color picker and real-time preview for intuitive color selection.

🎨
Design Tools

Color Picker

Pick colors intuitively using a color wheel and sliders. Get and copy color codes in HEX, RGB, and HSL formats.

🎨
Design Tools

Image Color Extractor

Automatically detect dominant colors from an image and generate a color palette. You can also click anywhere on the image to pick individual colors.

🎯
Design Tools

Image Average Color Picker

Calculate the average color of an entire image or a selected area. Useful for choosing color schemes or thumbnail background colors.

🌈
Design Tools

CSS Gradient Generator

Visually create CSS gradients with drag controls. Supports linear, radial, and conic gradient types with presets.

🔲
Design Tools

CSS Box Shadow Generator

Visually create CSS box-shadow with sliders. Supports multiple shadows and inset shadows.