hello guys today we are going to create traingles using css. we’ve often seen triangles everywhere: like tooltips, dropdowns and many more. There are some different ways to build a triangle for your web designs. you can create triangles via :before and :after pseudo-elements. but in this article we will use just one HTML element and some simple styles that makes it much easier to use and maintain.
so let’s start How to quickly and easily create 100% pure CSS triangles with border stroke and color fill. No images, no font-icons and no JavaScript needed. and i really like this features of css3 because it reduces the use of images in website and allows to crete diffrent shapes.
The Html
You can make them with a single div with .
<div class="triangle-up"></div>
<div class="triangle-top-right"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom-Right"></div>
<div class="triangle-Bottom"></div>
<div class="triangle-bottom-left"></div>
<div class="triangle-left"></div>
<div class="triangle-top-left"></div>And here’s some common CSS to get us going:
.triangle-up {
width:0;
height:0;
border-style:solid;
border-width:0 50px 100px 50px;
border-color:transparent transparent #008000 transparent;
}
.triangle-top-right {
width:0;
height:0;
border-style:solid;
border-width: 0 100px 100px 0;
border-color:transparent #007bff transparent transparent;
}
.triangle-right {
width:0;
height:0;
border-style:solid;
border-width:50px 0 50px 100px;
border-color:transparent transparent transparent #000;
}
.triangle-bottom-Right {
width:0;
height:0;
border-style:solid;
border-width:0 0 100px 100px;
border-color:transparent transparent #E90325 transparent;
}
.triangle-Bottom {
width:0;
height:0;
border-style:solid;
border-width:100px 50px 0 50px;
border-color:#50B704 transparent transparent transparent;
}
.triangle-bottom-left {
width:0;
height:0;
border-style:solid;
border-width:100px 0 0 100px;
border-color: transparent transparent transparent #A400A4;
}
.triangle-left {
width:0;
height:0;
border-style:solid;
border-width:50px 100px 50px 0;
border-color:transparent #C60 transparent transparent;
}
.triangle-top-left {
width:0;
height:0;
border-style:solid;
border-width:100px 100px 0 0;
border-color:#FFFF04 transparent transparent transparent;
}Example
CSS arrows are a great alternative for images. No extra server requests, no bandwidth consumer and is easy to do.
I hope you will enjoy this article.
Happy coding.
