Tạo ribbon ở góc đẹp cho Blogspot bằng CSS

Tạo ribbon ở góc trái đẹp cho Blogspot bằng CSS

Chèn CSS

.ribbon-vip{position:absolute;left:-5px;top:-5px;z-index:1;overflow:hidden;width:75px;height:75px;text-align:right}
.ribbon-vip span{font-size:12px;font-weight:bold;color:#FFF;text-transform:uppercase;text-align:center;line-height:20px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);width:100px;display:block;background:#79A70A;background:linear-gradient(#3498DB 0%,#3498DB 100%);box-shadow:0 3px 10px -5px rgba(0,0,0,1);position:absolute;top:19px;left:-21px}
.ribbon-vip span::before{content:"";position:absolute;left:0;top:100%;z-index:-1;border-left:3px solid #3498DB;border-right:3px solid transparent;border-bottom:3px solid transparent;border-top:3px solid #3498DB}
.ribbon-vip span::after{content:"";position:absolute;right:0;top:100%;z-index:-1;border-left:3px solid transparent;border-right:3px solid #3498DB;border-bottom:3px solid transparent;border-top:3px solid #3498DB}

Chèn HTML

<div class='ribbon-vip'><span>nội dung</span></div>

Result

Chú ý: nhớ chỉnh sửa vị trí left -5px,top -5px cho phù hợp nhé

Mọi bài viết đều thuộc bản quyền Bác Sĩ Windows, được viết bởi Admin. Hãy thể hiện mình là người văn minh, có văn hóa bằng cách copy ghi rõ "Nguồn: www.bacsiwindows.com". Tìm hiểu thêm