DEV Community

Cover image for How make a Triangle in CSS3
Jmlpez
Jmlpez

Posted on

How make a Triangle in CSS3

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
Enter fullscreen mode Exit fullscreen mode

Then open the folder in vscode typing:

code .
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

You sould see something like this in your browser:

Triangle example

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;
Enter fullscreen mode Exit fullscreen mode

You should see something like this:

Rectangle Triangle example

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

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (6)

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Useful 🤘

Collapse
 
abderrezakzed profile image
Abderrezak Zemmit

Good job

Collapse
 
zaki_dz profile image
Zaki_Dz

You can just use clip-path .

Collapse
 
jmlpez profile image
Jmlpez

Yeah, the clip-path property is useful and is a valid approach to achieve that, but the support of that property is still limited

Collapse
 
sitonimbus profile image
Carlos Andrés Mora González

🧐🧐🧐 ¿por qué no lo intentas con react?