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
Xem Demo Source Hosting tốt nhấtBài viết liên quan:
Tại sao nên dùng chứng chỉ số SSL
Một động thái đáng được hoan nghênh của Google nhằm giúp thế giới web an toàn hơn chính là ...
Hướng dẫn & Tài liệu học CSS căn bản
HTML và CSS là 2 ngôn ngữ cơ bản nhất trong thiết kế web, nếu HTML là phần xây thô của ngôi...
Tạo một công tắc đơn giản bằng CSS
Bạn có thể dùng CSS để tạo một "công tắc" (Toggle Switch) thay vì checkbox, ví dụ như On/Of...
Gần 1K template CSS & HTML5 chất lượng miễn phí từ Templated.co
Templated.co - website cung cấp template viết bằng CSS và HTML5 miễn phí nhưng đặc biệt là ...
Cách tạo loading icon đẹp mắt cho web
Thủ thuật dưới đây sẽ giúp bạn tạo một loading icon đẹp mắt cho web, giúp khách hàng đỡ nhà...