Hacking CSS: Border Slants

Hacking CSS: Border Slants

While redesigning this site I came across a css hack by which borders inclined at an angle can be created. I observed it while designing the navigation and decided against removing the slants cuz I think they're cool.

zoom

I decided to play a bit with this little hack and made myself some hills using plain html and css.

You can view it here.

The CSS

#hill
{
float: left;
width: 250px;
margin: 0px;
font-size: 21px;
}
#hill a {
display: block;
width:0px;
padding: 5px 5px 5px 10px;
border-bottom: 125px solid #fff;
text-decoration: none;
color: #000;
}
#hill ul{
margin: 0px;
list-style-type: none;
padding: 0px;
}
.h1
{
background: #e3e147;
border-left: 300px solid #e3e147;
}
.h2
{
background: #47e3b5;
border-top: 125px solid #fff;
border-left: 300px solid #47e3b5;
}

.h3
{
border-left: 300px solid #47c0e3;
border-top: 125px solid #fff;
background: #47c0e3;
}

.h4
{
border-left: 300px solid #e34765;
border-top: 125px solid #fff;
background: #e34765;

}

The HTML

<div id = "hill">
<ul>
<li><a href="#" class= "h1"></a></li>
<li><a href="http://ganeshiyer.net/about/" class= "h2"></a></li>
<li><a href="http://ganeshnomicks.blogspot.com/" class= "h3"></a></li>
<li><a href="http://feeds2.feedburner.com/ganeshiyer/rssfeed" class= "h4"></a></li>

</ul>
</div>

I'd love to see your results, post 'em here.

About Ganesh

Page with Comments

  1. hey ganesh....
    santosh here....bahut mast website banayi hai
    proud of you....purani se to bahut mast hai....and meri advise tune leli at last...vo SEARCH wala box tune daal diya at last....

Leave a Reply

Your email address will not be published. Required fields are marked *