How make a Triangle in CSS3
Tags: webdev, css, tutorial
Published: 2022-06-24 21:28:42

Hi! There are several ways to make a triangle in CSS3, in this post I will show one of them, using the `border` property

## First!

### 1- Prepare the environment

You can use any text editor, however I recommend vscode :).

Now just create a folder and inside it two the `index.html` and the `style.css`

If you are using linux just type:

```
mkdir triangleExample
cd triangleExample
touch index.html style.css
```

Then open the folder in vscode typing:

```
code .
```

## Next!

### 2- Create a simple static web page

Write the html content with a section tag and a div with the class triangle inside it:

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Triangle Example</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <section class="section">
            <div class="triangle"></div>
        </section>
    </body>
</html>
```

Write the basic style for the section tag:

```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

```

Open the `index.html` file in your browser (I recommend  [Google Chrome](https://www.google.com/chrome/) :))

## Finally!

### 3- Create a triangle

Once you get here is just type the triangle styles:

```
.triangle {
    width: 0;
    height: 0;
    display: inline-block;
    border: 50px solid transparent;
    border-top-color: crimson;
}
```

You sould see something like this in your browser:


![Triangle example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx8dijvt5y007cg33uok.png)


## How it works...?

The trick is that the triangle does not has `width` or `height`, and we set the `border` property to 50px (the size tha we want :))

Also the `border-style` is solid so is fully painted and the `border-color` is transparent so in that way, you will not see anything

But if we set `border-top-color` to crimson for example, then we will see just the to top of our element (because the others sides are transparent), which is in fact a triangle!

You can play around with those values and paint any of the sides, and even paint a rectangle triangle

To achieve this just paint the top and the left `border` in the triangle styles:

```
    border-top-color: crimson;
    border-left-color: crimson;
```

You should see something like this:


![Rectangle Triangle example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk3duvmngierqoj4o2mv.png)

## Usage Examples

There are many uses for a triangle in a web page

You can create a message box with an arrow like this:


![Message Box Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adwsd7eowh55gheatgb0.png)

To achieve this let's wrap our triangle in div tag with the class "message-box" and put a message inside it:

```
<div class="message-box">
    Message Box!
    <div class="triangle"></div>
</div>
```

Then modify the message-box element style:

```
.message-box {
    background-color: crimson;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    border-radius: 6px;
}
```

And finally create and position the triangle correctly:

```
.message-box .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: crimson;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
```

We set `position: absolute` to the triangle, for correct positioning, because it must be right down the message box, and centered

For centered we set the `left: 50%` property to paint the element right after the middle (because the paint starts exactly in the middle) so is necessary move it the half of it's size and for that we use `transform: translateX(-50%)`.

## Concluying

Now you should know how to easy create triangles in CSS3

You can play around with those values and create the perfect triangle for your page!