Thursday, 3 October 2013

Create traingular shape using CSS.

Advertisement

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.


EmoticonEmoticon