css实现卡片右上角的状态

1、成品展示

2、html部分

html 复制代码
<div class="itemBox">
    <div class="status">
         {{ statusList[item.status] }}
    </div>
</div>

3、css部分

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;
}
相关推荐
Trust yourself2439 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统21 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead34 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm