 | Bài viết này minh sẽ hướng dẫn cách để tạo một dây băng đơn giản hoàn toàn bằng CSS không sử dụng bất kỳ hình ảnh phụ trợ nào. Với nó bạn sẽ có thêm tùy chọn để tang trí cho website của mình. |
Simple Ribbon Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> VNLIVES.NET - SIMPLE RIBBON</title>
<style type="text/css">
.ribbon {
background: #f47d19;
position: relative;
height: 50px;
width: 95%;
margin:0 25px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
height:0;
border: 25px solid transparent;
top: 0;
width: 0;
border-top-color: #f47d19;
border-bottom-color: #f47d19;
z-index: -1;
}
.ribbon:before {
left: -25px;
}
.ribbon:after {
right: -25px;
}
</style>
</head>
<body>
<div class="ribbon"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> VNLIVES.NET - SIMPLE RIBBON</title>
<style type="text/css">
.ribbon {
background: #f47d19;
position: relative;
height: 50px;
width: 95%;
margin:0 25px;
}
.ribbon:before, .ribbon:after {
content: '';
position: absolute;
height:0;
border: 25px solid transparent;
top: 0;
width: 0;
border-top-color: #f47d19;
border-bottom-color: #f47d19;
z-index: -1;
}
.ribbon:before {
left: -25px;
}
.ribbon:after {
right: -25px;
}
</style>
</head>
<body>
<div class="ribbon"></div>
</body>
</html>
Live View:
No comments:
Post a Comment