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

Thứ Năm, 21 tháng 5, 2009
Create a Scalable Star using using CSS border
[FD's BlOg] - Đâ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.

Copy bài viết: +A Tăng cỡ chữ =A Mặc định -AGiảm cỡ chữ

Liên hệ mail: tpm1512@yahoo.com và xem tất cả bài viết trang này Tại đây
Nhấn vào theo dõi thăm trang web của Trần Phúc Minh


  • https://yogaso1.blogspot.com/2009/05/tao-ngoi-hinh-ngoi-sao-voi-css-border.html
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
Mã Hóa Code

Tổng số Bình luận [ 0]

Đăng nhận xét

Lên trên