CSS Triangles: Make triangles in HTML without images

by · October 30, 2012

This is very good trick in CSS by which you can make trianges without using images. These trianges are mainly used in the menu bar drop down when we have multiple submenus and may be further submenus of submenu. These triangles are the indicators(triangles pointed down) that this menu has childs or sub-menus. You can check the live example of these menus in our website’s menu bar.
The best use of these triangles is that they reduces the page load which increases the performance of website. We should avoid the triangle images as we can make these triangles by CSS.

CSS Triangles

HTML and CSS code:

<style>
.left-arrow {
border-color: transparent black;
border-style: solid;
border-width: 30px 30px 30px 0px;
height: 0px;
width: 0px;
}

.right-arrow {
border-color: transparent brown;
border-style: solid;
border-width: 30px 0px 30px 30px;
height: 0px;
width: 0px;
}

.down-arrow {
border-color: red transparent;
border-style: solid;
border-width: 30px 30px 0px 30px;
height: 0px;
width: 0px;
}

.up-arrow {
border-color: orange transparent;
border-style: solid;
border-width: 0px 30px 30px 30px;
height: 0px;
width: 0px;
}

.top-right{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent #007bff transparent transparent;
}

.top-left{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: #007bff transparent transparent transparent;
}

.bottom-right{
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 20px 20px;
border-color: transparent transparent #007bff transparent;
}

.bottom-left{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 0 20px;
border-color: transparent transparent transparent #007bff;
}

</style>

<div class=”left-arrow”></div>
<div  class=”right-arrow”></div>
<div class=”down-arrow”></div>
<div class=”up-arrow”></div>
<div class=”top-right”></div>
<div  class=”top-left”></div>
<div class=”bottom-right”></div>
<div class=”bottom-left”></div>

If you have any query related to this you can comment or mail me at vikas@knowahead.in

VN:F [1.9.22_1171]
Rating: 8.2/10 (9 votes cast)
VN:F [1.9.22_1171]
Rating: +8 (from 8 votes)
CSS Triangles: Make triangles in HTML without images, 8.2 out of 10 based on 9 ratings

You may also interested in:

Category Featured, howTo