How make a Triangle in CSS3

#webdev #css #tutorial

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 :))

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:

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:

Usage Examples

There are many uses for a triangle in a web page

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

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%).