Today we are going to learn about how to create a triangle using CSS3. First of all it’s very simple to do, but required a to know a tip. We will use border-radius property to create that triangle. I’ve also added download and demo link just below the post. So you can check and download source code for future use. Let’s get started-
The idea of creating a triangle using CSS3 is straightforward but a bit tricky. We must create a div and assign a common class called “bwl-arrow”. We will make this div width and height zero(0px) and add 1em margin (optional). Then we will add a few classes that will define the direction of the arrow, like – up, down, left, and right. We will use the CSS border property to create a triangle.
Now, the Idea of direction classes is – If you define an arrow for the up direction you need to make the left and right border transparent and add colors and width for the bottom border. Remember one thing all border widths must be the same, and it will give us the symmetric shape of a triangle. In the following example, we will use 10px as the border width. But you can add any size of border as you want. Let’s jump into the code –
HTML Snippets
<div class="bwl-arrow-container"> <p>Up Arrow: </p> <div class="bwl-arrow up"></div> <p>Down Arrow: </p> <div class="bwl-arrow down"></div> <p>Left Arrow: </p> <div class="bwl-arrow left"></div> <p>Right Arrow: </p> <div class="bwl-arrow right"></div> </div>
CSS Snippets
.bwl-arrow-container{
margin: 30px auto;
width: 400px;
}
.bwl-arrow{
width: 0px;
height: 0px;
margin: 1em;
}
.up{
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #A52A2A;
}
.down{
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #9ACD32;
}
.left{
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid #FE6347;
}
.right{
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #6A5ACD;
}Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!
