Tạo bài viết

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é

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é


Tôi thích viết Blog để chia sẻ trãi nghiệm của chính mình. Tôi làm việc về Digital Marketing (SEO, Google Adwords, Facebook) và hy vọng sẽ có cơ hội hợp tác với bạn trong tương lai. Cùng chia sẻ kinh nghiệm mình có được