CSS网页角落丝带样式

效果展示

140.jpg

CSS样式

.ribbon {
    position: fixed;
    top: 4.6em;
    left: -3.4em;
    z-index: 9999;
    width: 18em;
    height: 2em;
    overflow: hidden;
    background-color: #dc3545;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    line-height: 2em;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ribbon-sm { font-size: 13px; }
.ribbon-md { font-size: 16px; }
.ribbon-lg { font-size: 20px; }

.ribbon-primary { background-color: #007bff; }
.ribbon-secondary { background-color: #6c757d; }
.ribbon-success { background-color: #28a745; }
.ribbon-warning { background-color: #ffc107; }
.ribbon-info { background-color: #17a2b8; }
.ribbon-light 
{ 
    color: #343a40;
    background-color: #f8f9fa;
}
.ribbon-dark { background-color: #343a40; }
.ribbon-white 
{ 
    color: #343a40;
    background-color: #ffffff;
}

.ribbon.ribbon-top-right 
{ 
    left: auto;
    right: -3.4em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ribbon.ribbon-bottom-left 
{ 
    top: auto;
    bottom: 4.6em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ribbon.ribbon-bottom-right 
{ 
    top: auto;
    left: auto;
    bottom: 4.6em;
    right: -3.4em;
}

HTML代码

<body>     
<a class="ribbon" href="">自定义文本</a>
<a class="ribbon ribbon-top-right ribbon-sm" href="">自定义文本</a>
<a class="ribbon ribbon-bottom-left ribbon-md ribbon-success" href="">自定义文本</a>
<a class="ribbon ribbon-bottom-right ribbon-lg ribbon-primary" href="">自定义文本</a>
</body>
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞13赞赏分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容