Thẻ đánh dấu (Ribbon) có thể tạo một cách đơn giản bằng cách dùng CSS, mà không cần phải đụng đến HTML hay hình ảnh.
Chúng ta chỉ cần dùng một đoạn HTML đơn giản:
Trong ví dụ này, mình sẽ đặt CSS Ribbon trong một box, với H3 cho tiêu đề (title) và một vài chữ.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Và đây là code CSS cho phần position của Ribbon
.ribbon-box .ribbon {
display: inline-block;
position: absolute;
left: 20px;
top: 38px;
}
Chúng ta sẽ dùng thêm :before và :after để tạo hình cho Ribbon
.ribbon-box .ribbon:before,
.ribbon-box .ribbon:after {
content: "";
display: block;
position: absolute;
height: 10px;
bottom: -8px;
border: 18px solid #53b0de;
}
Chúng ta sẽ tạo phần đuôi cho Ribbon
.ribbon-box .ribbon:before {
border-bottom-color: transparent;
bottom: -40px;
}
Mời bạn xem demo và có thể tải source về theo link bên dưới
[su_button url=”https://tuicode.net/demo/css-ribbon/” style=”3d” background=”#1369df”]Xem Demo[/su_button] [su_button url=”https://tuicode.net/demo/css-ribbon/css_ribbon.zip” style=”3d” background=”#1369df”]Source[/su_button] [su_button url=”http://goo.gl/GSWrOS” style=”3d” background=”#1369df”]Hosting tốt nhất[/su_button]