This work is highly inspired by Tantek Çelik's Study of Regular Polygons, Eric Meyer's Slantastic Demo and Lasse Reichstein Nielsen's Information on Border Slants. This might look familiar to Slant Star, but not using the same method, I think. The difference might be that this test case doesn't work in Internet Explorer, though I never tend to test it thoroughly. What's so cool about this star is that it's a hyperlink, applied with a hover color, sort of like the effect on Tantek's home page.
This star shape does look simple, but it took me hours to figure out how to form all the edges and calculations. All those complex calculations lead to a scalable star which feels a bit like SVG, by increasing or decreasing the font/text sizes from your browser.
The HTML codes are very simple, as follows:
<a href="#" id="star">
<span id="top"></span>
<span id="center"><span>Star</span></span>
<span id="bottom"></span>
</a>
You may put any URI values to the href
attribute and replace Star with other text. The CSS codes are quite complicated, shown below with comments:
/*** Star styles ***/
#star{
width: 15em;
height: 14.27em;
position: relative;
/* Useful for absolute positioned elements */
}
#star span,
#star{
display: block;
}
#top{
/* Create a big triangle */
width: 0;
height: 0;
margin: auto;
border-right: 4.64em solid transparent;
border-left: 4.64em solid transparent;
border-bottom: 14.27em solid;
}
#center{
/* Add two 'points' to the triangle */
width: 5.7em;
border-right: 4.65em solid transparent;
border-left: 4.65em solid transparent;
border-top: 3.36em solid;
height: 0;
position: absolute;
top: 5.46em;
left: 0;
z-index: 100;
text-align: center;
}
#bottom{
/* Hide a small portion below the triangle */
position: absolute;
bottom: 0;
left: 2.852em;
border-right: 4.635em solid transparent;
border-left: 4.635em solid transparent;
border-bottom: 3.4em solid #fff;
width: 0;
height: 0;
}
#center span{
margin-top: -2em;
color: #000;
background-color: transparent;
font-weight: bold;
/* this is customizable for the text */
}
a#star:hover #center span{
/* hovered text color */
color: #fff;
background-color: transparent;
}
/* Hyperlink colors */
a#star{
color: #f90;
background-color: transparent;
}
a#star:hover{
color: #fc3;
background-color: transparent;
}
The only disadvantage of this star demo is that the bottom 'spacing' has a definite color, in order to create the star shape. In the example above, the definite color is white. But then, if you change it to green, I'm sure it'll be perfect to replace the odd rectangular star for the Slanty Little Greeting.
Note: transparent
is not a valid value for border colors. Therefore, the CSS codes shown above and used on this page are invalid.