效果图：
简单方式可以使用背景图片，但这里我使用的css来实现，最笨的方式是使用矩形div然后旋转遮挡就可以，
<div class=‘checked-item‘>
角标实现
? <div class="replace-item">
??? <div class="jiao"></div>
??? <div class="desc">换</div>
? </div>
</div>
样式
.checked-item {
? position: relative;
? padding ?????????: 7px 10px;
? border ??????????: 1px solid ?#ebebeb;
? text-align ??????: center;
? color ???????????: #808080;
? background-color : #fff; overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
}
.replace-item {
??? right: 0;
??? top: 0;
??? position: absolute;
??? color: #ffffff;
??? font-size: 12px;
? }
? .jiao, .desc {
????? position: absolute;
????? top:0;
????? right: 0;
??? }
??? .jiao {
????? width: 20px;
????? height: 37px;
????? transform: rotate(-50deg);
????? -webkit-transform: ?rotate(-50deg);
????? -moz-transform: ?rotate(-50deg);
????? -ms-transform: ?rotate(-50deg);;
????? top: -15px;
????? right: -4px;
????? background-color: #ff685d;
????? padding:0;
??? }
??? .desc {
????? top: -2px;
??? }
???
css实现角标
原文地址：https://www.cnblogs.com/wind-wang/p/9606566.html