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;
}