css 制作丝带
使用 CSS 制作丝带效果
基础丝带样式
通过 transform 和 position 属性创建倾斜的丝带效果，配合伪元素添加立体感：
.ribbon {
position: relative;
background: #ff4757;
color: white;
text-align: center;
padding: 0.5em 2em;
margin: 2em auto;
width: fit-content;
}
.ribbon::before, .ribbon::after {
content: '';
position: absolute;
bottom: -10px;
border: 15px solid #ff6b81;
z-index: -1;
}
.ribbon::before {
left: -20px;
border-right-width: 10px;
border-left-color: transparent;
}
.ribbon::after {
right: -20px;
border-left-width: 10px;
border-right-color: transparent;
}动态悬停效果
增加悬停动画和阴影提升交互性：
.ribbon:hover {
transform: rotate(2deg);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: all 0.3s ease;
}丝带角标变体
实现右上角定位的角标式丝带：
.corner-ribbon {
width: 200px;
position: absolute;
top: 25px;
right: -50px;
text-align: center;
line-height: 2em;
transform: rotate(45deg);
background: #e74c3c;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
}多层丝带叠加
使用多重伪元素创建复杂层次：
.layered-ribbon {
position: relative;
background: linear-gradient(to right, #ff4757, #e84118);
}
.layered-ribbon::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to right, #e84118, #c23616);
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}响应式调整
通过媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
.ribbon {
transform: scale(0.8);
margin: 1em auto;
}
}关键技巧包括：合理运用伪元素构建形状，transform 实现立体旋转，clip-path 裁剪特殊边缘，以及渐变色彩增强质感。通过调整角度、层叠顺序和过渡效果，可以衍生出多种视觉变体。
