Making a triangle with CSS is a great skill to have available to you, as it gives you one more way to call attention to an element on the screen. And let’s face it, people love triangles! So let’s take a look at how to get it done.
This lesson is a very easy one, and may also help those of you new to coding to better understand the behavior of borders. To begin, you will need to create a div. In this example the code looks like this.
<body>
<div class="triangle"></div>
</body>
Now that a div set up, you can begin to apply CSS to it. Since a class was already created within the div, it will be easy to keep the styling simple. Using three borders, two of which that are transparent, you will be able to assign a color to the remaining border and create the illusion of a triangle. The two transparent borders are basically carving out the color of the third, leaving a three-sided solid colored triangle object.
For instance, if you wanted a downward facing red triangle, then your code would look something like this.
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid red;
}
And if you wanted the triangel to face to the right and for the color to be blue instead, your code would then be changed to look something like this.
.triangle {
width: 0;
height: 0;
border-left: 30px solid blue;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
}
So as you can see, making a quick triangle for your projects is really no big deal at all. Only a few lines of basic CSS code and you’re done! If this tutorial was helpful, then you will probably also like our recent post on changing and managing cursors through CSS. It’s just one more way to help leave an impression on the end user and help them have the best experience possible when interacting with a site you’ve designed. Make sure you send us a message if you have requests for future tutorials, or if you would like to share one of your own with the community. Thansk for stopping by!