CSS网页角落丝带样式
在网页设计的世界里，细节往往决定成败。CSS 作为网页样式构建的强大工具，能够为页面注入独特的魅力与个性。
角落丝带样式便是其中一种极具创意和装饰性的元素，它宛如网页上的点睛之笔，能够瞬间吸引用户的目光，为整个页面增添一份精致与灵动。
效果展示
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>
作者：Yudada
标题：CSS网页角落丝带样式
©文章版权不归作者所有。
@未经允许随便转载，记得艾特我。
📞部分内容综合整理自网络，如有侵权联系删除。
标题：CSS网页角落丝带样式
©文章版权不归作者所有。
@未经允许随便转载，记得艾特我。
📞部分内容综合整理自网络，如有侵权联系删除。
THE END
