MUKU OWNERS: Create traingular shape using CSS

Saturday, August 19, 2017

Create traingular shape using CSS

After 1 to 2 hour searching i went to a right place where i find my solution about "how to create a triangular shape using CSS". When you see the solution you will be in shock that "for what i spend 2 hour".
Actually i was working on a project where the need is to create a voting scheme like stackoverflow.com have.
So here is the simple code to create a traingular shape using CSS.

HTML CODE


<html>
    <head>
        <link rel="stylesheet" href="some.css"/>
    </head>
    <body>
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </body>
</html>

CSS CODE


.top {
 height:0px;
 width:0px;
 border-right:40px transparent solid;
 border-left:40px transparent solid;
 border-bottom:40px red solid;
}
.bottom {
 height:0px;
 width:0px;
 border-right:40px transparent solid;
 border-left:40px transparent solid;
 border-top:40px red solid;
}
.right {
 height:0px;
 width:0px;
 border-top:40px transparent solid;
 border-left:40px red solid;
 border-bottom:40px transparent solid;
}
.left {
 height:0px;
 width:0px;
 border-top:40px transparent solid;
 border-right:40px red solid;
 border-bottom:40px transparent solid;
}

So the output will look like this

So here you done. If you want to create the voating scheme like stackoverflow you can use these divs like an anchor.

Available link for download