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%)
.
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)
Useful 🤘
Good job
You can just use clip-path .
Yeah, the clip-path property is useful and is a valid approach to achieve that, but the support of that property is still limited
🧐🧐🧐 ¿por qué no lo intentas con react?