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;
}
css實現角標