CssHow-ToBeginner · 3 min read

How to Create Triangle Using CSS: Simple Guide

You can create a triangle in CSS by using a zero-sized element with different border widths and colors. Setting three borders to transparent and one border to a visible color forms a triangle shape pointing in the direction of the colored border.

📐

Syntax

To create a triangle, use an element with width and height set to zero. Then apply border-style: solid; and set different border-width values. Make three borders transparent and one border colored to form the triangle.

width and height: set to 0 to collapse the box.
border-width: controls the size of the triangle sides.
border-color: three sides transparent, one side colored.
border-style: must be solid for visible borders.

css

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: transparent transparent red transparent;
}

Output

A red triangle pointing upwards formed by the colored bottom border.

💻

Example

This example shows how to create a simple red triangle pointing upwards using CSS borders on a <div> element.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Triangle Example</title>
<style>
  .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 50px;
    border-color: transparent transparent red transparent;
    margin: 50px auto;
  }
</style>
</head>
<body>
  <div class="triangle" aria-label="Red upward pointing triangle" role="img"></div>
</body>
</html>

Output

A red triangle pointing upwards centered horizontally on a white background.

⚠️

Common Pitfalls

Common mistakes when creating CSS triangles include:

Not setting width and height to zero, which shows a square instead of a triangle.
Forgetting to set border-style: solid;, so borders don't appear.
Using the wrong border colors, causing the triangle to be invisible or look incorrect.
Confusing which border to color to get the desired triangle direction.

Always remember the colored border points in the direction of the triangle.

css

.wrong-triangle {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 50px 50px 0 50px;
  border-color: red transparent transparent transparent;
}

.correct-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 50px;
  border-color: transparent transparent red transparent;
}

Output

The .wrong-triangle shows a large square with a red border on top, not a triangle. The .correct-triangle shows a proper red triangle pointing up.

📊

Quick Reference

Summary tips for creating CSS triangles:

Set width and height to zero.
Use border-style: solid;.
Adjust border-width to control triangle size.
Set three border-color values to transparent.
Set one border-color to the triangle color; this side points the triangle.

✅

Key Takeaways

Create triangles by setting width and height to zero and using border widths.

Only one border side should have a visible color; others must be transparent.

The colored border side determines the triangle's pointing direction.

Always use border-style solid to make borders visible.

Adjust border widths to change the triangle's size and shape.