Trước đây mình đã giới thiệu với các bạn rất nhiều cách tạo hình hoặc icon bằng CSS3, tiếp theo đây mình xin chia sẻ cho các bạn một icon rất đặc biệt nữa, đó là icon cờ việt nam, với icon này, các bạn có thể áp dụng cho những trang đa ngôn ngữ.
HTML
<div class='frame'>
<div class='star'></div>
</div>
CSS
*, *:before *:after { box-sizing: border-box; }
.frame {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 75px; height: 75px;
margin: auto;
border-radius: 100%;
background: #f46159;
transform: scale(3);
}
.star {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 0; height: 0;
margin: auto;
border-width: 0 6px 16px;
border-style: solid;
border-color: transparent transparent #fbe069;
transform: translateY(-14px);
}
.star:before, .star:after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
.star:before {
border-width: 15px 22px;
border-bottom-color: #fbe069;
transform: translate(-16px, 1px) rotate(35deg);
}
.star:after {
border-width: 15px 22px;
border-bottom-color: #fbe069;
transform: translate(-28px, 1px) rotate(-35deg);
}
Mình mong là qua bài viết này các bạn sẽ có thể hiểu rõ và tự sáng tạo thêm cho mình những icon khác từ bài viết ngày hôm nay.