CSS网页角落丝带样式

首页 » 技术教程 » CSS网页角落丝带样式

鹿泽 2024-06-14 14:20:38 鹿泽笔记 | 隐藏边栏 | 0 0

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>

技术教程网站建设

1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

你可能也喜欢

热评文章