css实现角标

效果图：

 

简单方式可以使用背景图片，但这里我使用的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;
　　}