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
So here you done. If you want to create the voating scheme like stackoverflow you can use these divs like an anchor.
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 thisSo here you done. If you want to create the voating scheme like stackoverflow you can use these divs like an anchor.
EmoticonEmoticon