Tạo ngôi hình ngôi sao với CSS Border

Create a Scalable Star using using CSS border

Đây là một thủ thuật nâng cao của lệnh border trong CSS, thủ thuật cho phép bạn tạo một hình ngôi sao dễ dang với các lệnh border và kết hợp với việc sử dụng z-index.

Xem demo trực tiếp ở đây: http://fandung.110mb.com/test/star.html

Hình ảnh minh họa

Bây giờ là code của thủ thuật:

1. Code CSS:

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

2. Code HTML

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

Chúc các bạn thành công!

Tạo ngôi hình ngôi sao với CSS Border