/*** 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;
}

<a href="#" id="star">
<span id="top"></span>
<span id="center"><span>Star</span></span>
<span id="bottom"></span>
</a>