css实现卡片右上角的状态
1、成品展示
2、html部分
<div class="itemBox">
<div class="status">
{{ statusList[item.status] }}
</div>
</div>3、css部分
.itemBox {
position: relative;
overflow: hidden;
}
.status {
height: 25px;
line-height: 25px;
background: #EC8E71;
font-size:13px;
color: #FFF;
position:absolute;
right:0;
top:0;
padding:0 20px;
box-sizing: border-box;
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform-origin:left bottom; // 设置变换原点
-webkit-transform:translate(29.29%,-100%) rotate(45deg);
-moz-transform:translate(29.29%,-100%) rotate(45deg);
transform:translate(29.29%,-100%) rotate(45deg); // 顺时针旋转45度
text-indent: 0;
}