css角标

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 {
left: 0;
}

.ribbon1:after {
right: 0;
}