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.
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.
