Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Mastering CSS Triangle: How to Create All Kinds of Triangles

Shapes are integral building blocks in web design that allow developers to organize information and intuitively guide users. Different shapes like circles, squares, triangles, and more convey distinct meanings that web designers leverage to build visual harmony and emotional connections.

For example, circular shapes promote feelings of harmony, carefreeness, and community due to their uniformity and lack of hard edges.

Web designers thus commonly use circles in elements meant to feel welcoming or innocent. Squares and rectangles, on the other hand, symbolize stability and order from their symmetric right angles. Developers rely on squares when designing components requiring structure, like navigation bars, data tables, or instructional elements.

CSS triangle tends to imply a sense of direction or intensity that designers harness when users need motivation to take action, like clicking a call-to-action button.

triangles image

Understanding different shapes as more than purely visual tools allows web developers to apply them when organizing and simplifying complex site architectures strategically. Their ability to guide users, denote meaning, and build connections demonstrates why quality web design requires deft and conscientious use of basic shapes.

One of such shapes we will be looking at creating programmatically using CSS is triangles. In this article, I will walk you through the various techniques you can use to create triangles using CSS.

Let’s jump right in and create triangle 🚀

Before we delve ahead, check out how Purecode.ai allows you to be a 10x developer by increasing efficiency, productivity, and effectiveness.

You no longer have to go through the hurdles of writing each piece of code for your components yourself; just choose from our repository of 10, 000+ AI-generated custom components for your web application.

Purecode.ai marketplace - Homepage

Methods of Creating Triangles with CSS

Usually, as a front-end developer, there would be a time when the need to create triangles would arise. This can be challenging to create given that everything about CSS revolves around boxes and rectangles. However, you have nothing to worry about as CSS offers different methods to create triangles.

There are different methods to create triangles using CSS. These include:

  • Creating Triangles Using CSS Borders

  • Equilateral Triangles with CSS Borders

  • Using CSS Gradients for Triangles

  • CSS Transform and Overflow Method

  • CSS Clip-Path for Triangle Creation

In the following sections, we will look at how to create triangles using each of these different methods.

If you prefer to learn by watching a tutorial video, I have included a 3 minutes YouTube video showing how to create a triangle:

Creating Triangles Using CSS Borders

By setting some borders to transparent, and others to a color you can create various triangles using CSS. This has to do with manipulating CSS tricks to get what you want. Read How do CSS triangles work? to understand the CSS tricks behind triangular shapes.

Triangle – Pointing Up

For this example, in the Up triangle below, we set the bottom border to the desired color, then set the left and right borders to transparent.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Up</title>
    </head>

    <body>
        <div class="triangle-up"></div>
    </body>
</html>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 150px solid #1b89d3;
  border-radius: 0;
}

Triangle - Pointing Up

Triangle – Pointing Down

This CSS code creates a downward-pointing triangle. It uses the border property to create the triangle, with the border-top being colored and the border-left and border-right being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

See the HTML code below and the following image for more information :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Down</title>
    </head>

    <body>
        <div class="triangle-down"></div>
    </body>
</html>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 150px solid #1b89d3;
}

Triangle - Pointing Down

Triangle – Pointing Right

This CSS code creates a right-pointing triangle. It uses the border property to create the triangle, with the border-left being colored and the border-top and border-bottom being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Right</title>
    </head>

    <body>
        <div class="triangle-right"></div>
    </body>
</html>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  border-left: 150px solid #1b89d3;
}

Triangle - Pointing Right

Triangle – Pointing Left

This CSS code creates a left-pointing triangle. It uses the border property to create the triangle, with the border-right being colored and the border-top and border-bottom being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Left</title>
    </head>

    <body>
        <div class="triangle-left"></div>
    </body>
</html>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  border-right: 150px solid #1b89d3;
}

Triangle - Pointing Left

Triangle – Pointing Up-Right

This CSS code creates a triangle that points upwards and to the right. It uses the border property to create the triangle, with the border-top being colored and the border-left being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

See the HTML code below for more information:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Up Right</title>
    </head>

    <body>
        <div class="triangle-up-right"></div>
    </body>
</html>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 150px solid #1b89d3;
  border-left: 150px solid transparent;
}

Triangle - Pointing Up Right

Triangle – Pointing Up-Left

This CSS code creates a triangle that points upwards and to the left. It uses the border property to create the triangle, with the border-top being colored and the border-right being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

See the HTML code below for more information:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Up Left</title>
    </head>

    <body>
        <div class="triangle-up-left"></div>
    </body>
</html>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 150px solid #1b89d3;
  border-right: 150px solid transparent;
}

Triangle - Pointing Up Left

Triangle – Pointing Down-Right

This CSS code creates a triangle that points downwards and to the left. It uses the border property to create the triangle, with the border-bottom being colored and the border-right being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

See the HTML code below for more information:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Down Right</title>
    </head>

    <body>
        <div class="triangle-down-right"></div>
    </body>
</html>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 150px solid #1b89d3;
  border-left: 150px solid transparent;
}

Triangle - Pointing Down Right

Triangle – Pointing Down-Left

This CSS code creates a triangle that points downwards and to the left. It uses the border property to create the triangle, with the border-bottom being colored and the border-right being transparent. The width and height of the element are set to 0 to ensure that only the triangle created by the borders is visible.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Pointing Down Left</title>
    </head>

    <body>
        <div class="triangle-down-left"></div>
    </body>
</html>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 150px solid #1b89d3;
  border-right: 150px solid transparent;
}

Triangle - Pointing Down Left

Equilateral Triangles with CSS Borders

The border property can also be used to create equilateral triangles where all sides are equal and all the borders are equall too. This requires some mathematical calculations to determine the correct border sizes.

Here is the formula for calculating the height of an equilateral triangle:

height = side * sqrt(3) / 2

We understand that sqrt(3)/2 is roughly 0.866 so here’s the CSS equilateral triangle:

To create an equilateral triangle with 100px sides using borders:

.equilateral-triangle {
  border-left: 100px solid;
  border-bottom: 173.2px solid;
  border-right: 100px solid;
  border-right-color: transparent;
  border-bottom-color: #1b89d3;
  border-left-color: transparent;
  height: 0;
  width: 0;
}

If you prefer this neater way to write the CSS class for this using CSS variables, check out the code below where we set the transparent borders:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Equilateral</title>
    </head>

    <body>
        <div class="equilateral-triangle"></div>
    </body>
</html>

.equilateral-triangle {
  --side-size: 100px;
  border-left: var(--side-size) solid transparent;
  border-right: var(--side-size) solid transparent;
  border-bottom: calc(2 * var(--side-size) * 0.866) solid #1b89d3;
  border-top: var(--side-size) solid transparent;
  display: inline-block;
}

Using a CSS variable allows you to set the size of your equilateral triangle in only one place.

Triangle - Equilateral

Using CSS Gradients for Triangles

CSS gradients can also generate triangles. You can use the CSS linear gradient and conical gradient to create triangles with gradients.

How To Create a Triangle Using CSS Linear Gradient

The linear-gradient property allows you to create angled fill effects. To create a triangle using CSS linear gradient, you can:

  1. Add a linear gradient towards the bottom right corner

  2. Add a linear gradient towards the top right corner

  3. Set the size of both linear-gradient to 50% width

  4. Put three gradients on top of each other

  5. Use color stops

  6. Make each diagonal gradient half-transparent

  7. Make each diagonal gradient cover only 50% width of the element

For example, a right triangle from top left to bottom right:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Linear Gradient</title>
    </head>

    <body>
        <div class="linear-gradient-triangle"></div>
    </body>
</html>

.linear-gradient-triangle {
  background: linear-gradient(to bottom right, transparent 50%, #1b89d3 50%);
  height: 150px;
  width: 150px;
}

Triangle - Linear Gradient

How To Create a Triangle Using CSS Conic Gradient

Conic gradients can make triangles with more control:

.conic-gradient-triangle {
  width: 150px;
  height: 150px;
  background: red conic-gradient(rgb(187, 89, 89), #1b89d3);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - Conic Gradient</title>
    </head>

    <body>
        <div class="conic-gradient-triangle"></div>
    </body>
</html>

Triangle - Conic Gradient

CSS TrianTransform and Overflow Method

If you want to build a triangle or down arrow or up arrow or arrow pointing in another direction, you can change the border values corresponding to what side you want to be visible.

Another approach would be to rotate the element with the transform property if you want to be fancy.

We can also create triangles with CSS transforms on pseudo-elements. This rotates a square element 45 degrees into a diamond shape, then cropped with overflow. The background position is in absolute position.

/* Define a square */
.square {
  width: 150px;
  height: 150px;
  background-color: transparent;
  position: relative;
}

/* Create a pseudo-element */
.square::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1b89d3;

  /* Transform the square into a triangle */
  transform: rotate(45deg);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - CSS Transform and Overflow</title>
    </head>

    <body>
        <div class="square"></div>
    </body>
</html>

Triangle - CSS Transform and Overflow

In this example, we first define a square with a size of 150px by 150px. We then create a pseudo-element with the same dimensions as the square. We apply a rotate(45deg) transform to the pseudo-element to turn it into a diamond shape.

Finally, we use the clip-path property to cut off the top half of the diamond, leaving us with a triangle. The triangle will point upwards because we’ve clipped the bottom half of the diamond.

If you want the triangle to point in a different direction, you can adjust the values in the polygon() function. For example, polygon(50% 100%, 0% 0%, 100% 0%) will make the triangle point downwards. You can also adjust the rotate() value to rotate the triangle.

For example, rotate(90deg) will rotate the triangle 90 degrees clockwise.

📝 NOTE: Remember to include vendor prefixes (like -webkit-, -moz-, -ms-, -o-) for better browser compatibility when using CSS3 properties in real projects.

If you are building a React application, consider using CSS frameworks such as Styled components that automatically add these vendor prefixes for you.

CSS Clip-Path for Triangle Creation

The clip-path property allows you to create polygon clipping masks. Clip-path is very useful for flexibly generating triangles and other shapes with clean edges. It defines a vector path to use as a clipping region.

The downsides include limited browser support (no IE) and more complicated coordinate calculations.

Here is a CSS triangle again using clip-path:

.clip-path-triangle {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid #1b89d3;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Triangle - CSS Clip-Path for Triangle</title>
    </head>

    <body>
        <div class="clip-path-triangle"></div>
    </body>
</html>

Triangle - CSS Clip-Path for Triangle

In this example above, we first define a square with zero width and height, and then use borders to create a triangle.

The clip-path property cuts off the parts of the square that we don’t need, leaving us with a triangle. The polygon() function inside the clip-path property defines the shape of the triangle.

The three pairs of percentages inside the polygon() function represent the three vertices of the triangle.

📝 NOTE: Remember to include vendor prefixes (like -webkit-, -moz-, -ms-, -o-) for better browser compatibility when using CSS3 properties in real projects. Also, please note that the clip-path property is not supported in IE. If you need to support IE, you might want to consider other methods to create a triangle.

FAQs

How do you make a right-angled triangle in CSS? Use the border trick to create a triangle shape. Set one transparent border, and give the adjacent borders a solid color, width, and style. Adjust dimensions to create a right angle..

right-triangle {   width: 0;   height: 0;   border-left: 150px solid red;   border-top: 150px solid transparent; } 

What is the code for an upside-down triangle in CSS? Set the transparent border on the bottom instead of the top to flip the triangle upside down.

.upside-down {   width: 0;   height: 0;   border-left: 150px solid transparent;   border-right: 150px solid transparent;   border-top: 100px solid #1b89d3; } 

How do you calculate the width of a CSS triangle? The height of the triangle determines the width of the borders. Calculate width using border widths and basic trigonometry based on the angles needed.

/* Height = 100px (border size) /* Calculate width using trigonometry */ .triangle {   height: 0;   width: 0;   border-bottom: 100px solid;   border-left: 150px solid transparent;   border-right: 86.6px solid transparent; } 

How to shape a div element into a triangle in CSS? Use the border trick, making one border transparent. This removes a square section, leaving the visible borders to form a triangle shape.

.triangle-div {   width: 0;   height: 0; border-top: 100px solid red;   border-left: 150px solid transparent;   border-right: 150px solid transparent; } 

How do you create a 90-degree triangle using CSS? Set two adjacent borders to equal widths, leaving the hypotenuse side with a transparent border. This forms a right triangle.

.right-triangle {   width: 0;   height: 0;   border-left: 150px solid #1b89d3;   border-top: 150px solid transparent; } 

How do you style the borders to make a triangle shape in CSS? Use the border property to set colors, widths, and styles. Make one border transparent to form the triangle window.

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

How can I create an isosceles triangle with CSS? Set two of the borders to equal widths. Then adjust the third border until you achieve the isosceles shape needed.

.isosceles {   width: 0;   height: 0;   border-bottom: 100px solid red;   border-left: 150px solid transparent;   border-right: 150px solid transparent; }

FAQ Part 2

What is the triangle symbol △ called? The triangle symbol is called a delta.

How do you make a CSS triangle with rounded corners? Instead of solid border styles, use rounded borders to achieve a triangle shape with rounded corners.

How to add a triangle shape to a div element in CSS? Turn the div into a triangle shape using the transparent border trick. Position and size it as needed alongside other elements.

How do you add borders around a shape created in CSS? Use CSS properties like outline or box-shadow to add borders around a shape without affecting the shape itself. Check out this detailed article on How to Create and Style Beautiful Borders in CSS.

Tabular Comparison

MethodHow it WorksCode ExampleAdvantagesDisadvantages
BorderCreates angled corners by making borders transparentcss .triangle { border-left: 50px solid; border-top: 50px solid transparent; }Supported by all browsers. Simple to implement.Rigid, not responsive, or animatable.
Linear GradientUses angled gradient with hard stopcss .triangle { background: linear-gradient(to bottom right, red 50%, blue 50%); }Good browser support. Responsive and animatable.Trickier to visualize.
Conic GradientRenders angled gradient slicescss .triangle { background: conic-gradient(red 135deg, blue 225deg); }Precise angle control. Animatable.Limited browser support.
Clip PathDefines vector polygon to use as clip-pathcss .triangle { clip-path: polygon(50% 0, 0 100%, 100% 100%); }Clean responsive triangles.No IE support. Complex coordinate calculations.
TransformRotates element and hides overflowcss .triangle:after { transform: rotate(45deg); }Interesting effects are possible.Falls back to square in some browsers.

Comparison

The Borders method is the simplest and most cross-browser. For responsive or sleek triangles, Clip Path or CSS gradients are best.

What You Have Learned

In this article, you have learned various techniques for mastering CSS triangles, enabling you to create diverse triangle shapes using different CSS techniques.

The methods covered include CSS Border, CSS Gradients, CSS Transform and Overflow, and CSS Clip-Path.

You now possess a comprehensive understanding of CSS triangle creation, empowering you to choose the most suitable method for your design needs.

Check out this CSS triangle generator to quickly and easily generate any kind of triangle ranging from isosceles triangles, and equilateral triangles, to triangles pointing in any direction:

If you would like to explore more, check out this YouTube video on How to Create a CSS Outline Triangle in just 3 minutes:

If you are working on a CSS project, and you want to be 5x more productive, you want to skip the boring part of writing each piece of code yourself, check out our AI-generated custom components for CSS. This allows you to quickly start on your project.

Further Readings

If you enjoyed reading this piece, be sure to check other great tutorials on our blog:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.