如何⽤CSS实现好看的⾓标需要实现如下图所⽰的⾓标
其代码如下所⽰，可直接cv复⽤，根据⾃⾏需要进⾏修改：
html部分代码：
<div class='card-wrap'>
<div class='news1'>
<div class='ribbon'>
<div class='ribbon1'>热点</div>
</div>
</div>
</div>
CSS部分代码：
.
card-wrap {
text-align: center;
}
.news1 {
width: 400px;
height: 500px;
position: relative;
background: skyblue;
overflow: visible;
margin: 20px;
display: inline-block;
}
.ribbon {
width: 106px;
height: 108px;
overflow: hidden;
position: absolute;
top: -6px;
left: -6px;
}
.ribbon1 {
line-height: 18px;
text-align: center;
transform: rotate(-45deg);
position: relative;
padding: 8px 0;
left: -33px;
top: 26px;
width: 150px;
background: goldenrod;
color: white;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
letter-spacing: 1px;
}
.ribbon1:before,
.ribbon1:after {
content: "";
border-top: 4px solid #4e7c7d;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
bottom: -4px;
}
.ribbon1:before {好看的css代码
left: 0;
}
.ribbon1:after {
right: 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。