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é
- - 0 bình luận - lượt xem
https://pro.bacsiwindows.com/2018/01/tao-ribbon-o-goc-ep-cho-blogspot-bang.html

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé