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é
  1. Lại còm men đầu nũ òi :))

    Trả lờiXóa
  2. Em đag chơi game này. Em cũng áp dụng cái này vào blog share template ( blog thử nghiệm) của e

    Trả lờiXóa
  3. a ơi chỉ e làm với đc k ạ
    e làm cái chữ nó toàn ở trên cùng

    Trả lờiXóa
  4. nhưng mà chèn đoạc [code]class='ribbon-vip'[/code] vào đâu á bác :D

    Trả lờiXóa
    Trả lời
    1. Đây chỉ là bài hướng dẫn tạo ribbon thôi, còn để chèn vào blogspot như bacsiwindows thì phải áp dụng thẻ điều kiện nữa nhé bạn, có thể 1 bài khác hướng dẫn cách làm.

      Xóa
CÓ THỂ BẠN ĐANG TÌM