Free Online CSS Triangle Generator Tool

Generate CSS triangles online instantly with this free CSS Triangle Generator. Use the tool below to create pure CSS triangle shapes, arrows, pointers, tooltip triangles and border-based CSS triangle code for your website or interface.

CSS triangle settings

Create CSS triangles with border-based CSS or modern clip-path triangles with gradients, shadows and rotation.

Triangle controls

Border triangles are best for classic arrows. Clip-path triangles support gradients, radius and easier sizing.

Base width 180px
Height / depth 150px
Radius 0px
Rotation 0deg
Shadow opacity 24%

Live preview

Preview your triangle as a standalone shape, corner ribbon or tooltip arrow.

Tooltip card This preview uses the triangle as a small CSS arrow.
border triangle · top

Generated CSS

Triangle value border triangle

Saved triangles

Recent and favorite triangle styles are saved locally in this browser.

Recent triangles

Favorite triangles

What is a CSS Triangle Generator?

A CSS Triangle Generator is an online tool that helps you create triangle shapes with CSS. Instead of writing border values manually, you can choose the triangle direction, size, color and shape, preview the result and copy the generated CSS code.

CSS triangles are commonly created with the border trick. This method uses an element with zero width and height, then uses transparent borders and one colored border to form a triangle.

This CSS Triangle Generator runs directly in your browser, making it fast and simple to create triangle CSS without installing software.

What can you use it for?

You can use this online triangle generator to create CSS arrows, tooltip pointers, dropdown arrows, speech bubble pointers, navigation indicators, decorative shapes, section dividers, labels, badges and UI direction markers.

For example, you may want a small triangle below a tooltip, a down arrow for a dropdown menu, a pointer on a speech bubble, a decorative triangle in a hero section, or a pure CSS arrow for a card or popover.

How to use the CSS Triangle Generator

Step 1: Choose the triangle direction

Select whether the triangle should point up, down, left or right.

Step 2: Adjust size and color

Customize the triangle width, height, border values and color until the shape matches your design.

Step 3: Copy the CSS code

Copy the generated CSS triangle code and paste it into your stylesheet, component, page builder, theme or frontend project.

CSS triangle options

This CSS Triangle Generator can help with common shape tasks such as:

  • Generate CSS triangles
  • Create pure CSS triangle shapes
  • Create triangle arrows
  • Create tooltip pointers
  • Create dropdown arrows
  • Create speech bubble pointers
  • Create up triangles
  • Create down triangles
  • Create left triangles
  • Create right triangles
  • Adjust triangle size
  • Adjust triangle color
  • Generate border-based triangle CSS
  • Create UI pointer shapes
  • Create decorative CSS shapes
  • Preview triangle shapes live
  • Generate clean CSS code
  • Copy CSS triangle code instantly
  • Use the tool without installing software

The final CSS output may depend on the direction, size, border values, color and how the generated code is applied in your project.

How CSS triangles work

A common CSS triangle is created using borders. The element itself usually has no visible width or height.

.triangle {
  width: 0;
  height: 0;
}

Then, transparent borders are added on the sides, and one border is given a visible color.

.triangle-up {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 40px solid #2563eb;
}

This creates a triangle pointing up.

Basic CSS triangle examples

Triangle pointing up

.triangle-up {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 40px solid #2563eb;
}

Triangle pointing down

.triangle-down {
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-top: 40px solid #2563eb;
}

Triangle pointing left

.triangle-left {
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-right: 40px solid #2563eb;
}

Triangle pointing right

.triangle-right {
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 40px solid #2563eb;
}

CSS triangle direction explained

Up triangle

An up triangle usually uses a visible border-bottom and transparent left and right borders.

border-bottom: 40px solid #2563eb;

Down triangle

A down triangle usually uses a visible border-top and transparent left and right borders.

border-top: 40px solid #2563eb;

Left triangle

A left triangle usually uses a visible border-right and transparent top and bottom borders.

border-right: 40px solid #2563eb;

Right triangle

A right triangle usually uses a visible border-left and transparent top and bottom borders.

border-left: 40px solid #2563eb;

The visible border is usually opposite the direction the triangle points.

Tooltip triangle example

CSS triangles are often used as tooltip pointers.

.tooltip {
  position: relative;
  background: #111827;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
}

.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #111827;
}

This creates a small triangle below the tooltip box.

Dropdown arrow example

A small CSS triangle can be used as a dropdown arrow.

.dropdown-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

Using currentColor makes the triangle inherit the text color of the element.

Speech bubble pointer example

A triangle can be attached to a speech bubble or chat message.

.speech-bubble {
  position: relative;
  background: #e0f2fe;
  padding: 16px;
  border-radius: 16px;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -12px;
  width: 0;
  height: 0;
  border-top: 12px solid #e0f2fe;
  border-right: 12px solid transparent;
}

This creates a simple bubble pointer using only CSS.

Main CSS properties used for triangles

width and height

Most border-based CSS triangles start with zero width and height.

width: 0;
height: 0;

border

The border property creates the triangle shape.

border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 32px solid #2563eb;

transparent borders

Transparent borders create the invisible sides of the triangle.

border-left: 20px solid transparent;
border-right: 20px solid transparent;

colored border

The colored border creates the visible triangle.

border-bottom: 32px solid #2563eb;

position

Positioning is often used when a triangle is attached to another element.

position: absolute;

CSS triangle design tips

Keep small arrows simple

For tooltips and dropdowns, small triangles usually work better than large decorative shapes.

Match the parent background

When attaching a triangle to a tooltip or bubble, use the same color as the parent background.

Use currentColor for icons

If the triangle should match text color, currentColor can make the CSS easier to reuse.

Use pseudo-elements

Pseudo-elements like ::before and ::after are useful for adding triangles without extra HTML.

Test placement carefully

Small arrows often need precise positioning, especially inside tooltips, popovers and dropdowns.

Use clip-path for larger shapes

For large decorative triangles, clip-path may be easier to control than the border trick.

Pure CSS triangles vs SVG triangles

Pure CSS triangles

Pure CSS triangles are created with CSS borders. They are simple, lightweight and useful for UI details such as arrows, tooltips, dropdowns and pointers.

SVG triangles

SVG triangles are better when you need precise vector shapes, complex graphics, scalable icons or exported illustrations.

For small UI elements, CSS triangles are usually fast and convenient. For detailed artwork, SVG may be a better choice.

CSS triangles vs clip-path

Border triangle

The border method is a classic way to create small triangles and arrows with CSS.

border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 16px solid #2563eb;

Clip-path triangle

You can also create triangle shapes with clip-path.

.triangle-clip {
  width: 80px;
  height: 80px;
  background: #2563eb;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

The border method is great for small arrows and pointers. The clip-path method can be useful for larger decorative shapes.

Common CSS triangle use cases

For tooltips

Create small pointers that connect a tooltip to the element it describes.

For dropdown menus

Create arrows that show where a dropdown menu opens from.

For speech bubbles

Add small triangle pointers to chat bubbles, comments and message boxes.

For navigation

Use triangles as active menu indicators, tabs, breadcrumbs or directional markers.

For cards and badges

Add decorative corners, labels, ribbons or small pointer shapes.

For section dividers

Use larger triangles as geometric dividers or decorative layout accents.

Why use a CSS Triangle Generator?

A visual CSS Triangle Generator helps you create triangle shapes faster. Instead of manually calculating border sizes and transparent sides, you can choose the direction, adjust the size, preview the result and copy the CSS when it looks right.

This is useful for designers, developers, students, frontend builders, WordPress users, Elementor users and anyone creating UI details with CSS.

It can also help you create consistent arrows, pointers, dropdown indicators, tooltip triangles and decorative CSS shapes across a project.

Related tools

[fuo_related_tools limit="6" columns="3"]

Frequently Asked Questions

Is this CSS Triangle Generator free?

Yes. This CSS Triangle Generator is completely free to use.

No. You can generate CSS triangles directly in your browser without installing software.

CSS triangles are commonly created with an element that has zero width and height, transparent borders on some sides and one visible colored border.

Yes. You can create an up triangle by using transparent left and right borders with a visible bottom border.

Yes. You can create a down triangle by using transparent left and right borders with a visible top border.

Yes. You can create left and right triangles by using transparent top and bottom borders with a visible side border.

Yes. CSS triangles are commonly used as tooltip pointers, popover arrows and speech bubble tails.

Yes. A small CSS triangle can be used as a dropdown arrow or menu indicator.

Yes. The visible border color controls the triangle color.

Yes. CSS triangles are created with CSS, so you do not need image files.

Yes. After creating your triangle, you can copy the generated CSS code and use it in your project.

Yes. You can copy the generated CSS and use it in WordPress, Elementor, custom CSS fields, blocks, themes or frontend projects.

Use CSS borders for small arrows and pointers. Use clip-path when you need larger decorative triangle shapes.

The triangle element itself can occupy little or no layout space when using zero width and height, but its placement depends on how you position it in your layout.

Explore more CSS tools

Need more CSS utilities? Explore our free design tools to create blob shapes, border radius values, buttons, gradients, shadows, underlines, responsive layouts and modern UI effects faster.

Scroll al inicio