Triangle In CSS
Tags: css, triangle, shapes, svg
Published: 2020-06-01 15:41:20

ORIGINAL ARTICLE: [5 Ways To Create A Triangle With CSS](http://www.coding-dude.com/wp/css/create-a-triangle/)

Probably the easiest way to add a triangle in a web page is to simply draw it in an image and add the image to the web page. There are many secrets to drawing the perfect triangle and you can read how to do that in Photoshop in this article: [Create A Triangle](http://www.psd-dude.com/tutorials/triangle-photoshop.aspx) in Photoshop or download this free pack of [triangle shapes](https://www.photoshopsupply.com/vector/triangle-shapes-for-photoshop) for Photoshop.

In this post I will show you how to create a triangle with CSS & HTML.

Here’s an overview of the different methods I will use:

- Create a triangle using CSS `border`
- Create a triangle with CSS gradients (`linear-gradient` and `conical-gradient`)
- Create a triangle using `overflow` and `transform`
- Create a triangle using `clip-path`

#Using `border` to Create a Triangle in CSS

The following code will create a `div` with 4 triangles inside

HTML:
```html
<div class="triangle"></div>
```

CSS:
```css
.triangle {
    border-left: 20px solid cyan;
    border-right: 20px solid red;
    border-bottom: 20px solid green;
    border-top: 20px solid blue;
    display: inline-block;
}
```

Results into

![Triangle In CSS](https://dev-to-uploads.s3.amazonaws.com/i/lt0t8bwl62vih7r62qhf.png)

Making all borders transparent except the bottom border:

```css
.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}
```

we get

![Triangle in CSS](https://dev-to-uploads.s3.amazonaws.com/i/qgp8n0mnbq4o9uh1z553.png)

# How To Make An Equilateral Triangle Using `border`

CSS:

```css
.triangle-up-equilateral {
    --side-size: 20px;
    border-left: var(--side-size) solid transparent;
    border-right: var(--side-size) solid transparent;
    border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
    border-top: var(--side-size) solid transparent;
    display: inline-block;
}
```

![Equilateral Triangle In CSS](https://dev-to-uploads.s3.amazonaws.com/i/ar1abmwx57orzg4v9nus.png)

#How To Create a Triangle Using CSS Gradients

CSS:
```css
.triangle {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, green 50%, green 100%);
}
```

renders:

![CSS Triangle](https://dev-to-uploads.s3.amazonaws.com/i/bllvtpuahe6m1pgxom7v.png)

#How To Create a Triangle Using CSS `transform` and `overflow`

CSS code:

```css
.triangle-element {
    width: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
    margin: 10px;
}
.triangle-element:after {
    content: '';
    background: green;
    width: 142%;
    height: 142%;
    position: absolute;
    transform: rotate(45deg) translate(-71%,0);
}
```

![CSS Triangle](https://dev-to-uploads.s3.amazonaws.com/i/4yha3k6a5tpzdfrpuvq6.png)

#How To Create A Triangle In CSS Using `clip-path`

CSS Code:
```css
.triangle-element {
    width: 40px;
    height: 40px;
    background: green;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```

![CSS Triangle](https://dev-to-uploads.s3.amazonaws.com/i/3qx1r28k13fs2ftlshca.png)

#Conclusion

There are a lot of uses for triangles. From [arrow symbol](http://www.psd-dude.com/tutorials/resources/arrow-symbol.aspx) to map pins, from menu markers to chart elements.

Now you know how to create a triangle with CSS.

If you liked this tutorial, make sure to check out our Complete How-To Guide for creating and using [CSS Circle Images](http://www.coding-dude.com/wp/css/css-circle-image/) or see how to create a CSS only [bar chart in HTML](http://www.coding-dude.com/wp/html5/bar-chart-html/).