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.

0 comments:

Post a Comment

Blog Archive

Ads 468x60px

.

Ads

.

Featured Posts

Popular Posts

Like Us On FaceBook

Total Pageviews

Online Members

Live Traffic