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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/415256.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【实战教程】用 Next.js 和 shadcn-ui 打造现代博客平台

你是否梦想过拥有一个独特、现代化的个人博客平台&#xff1f;今天&#xff0c;我们将一起动手&#xff0c;使用 Next.js 和 shadcn-ui 来创建一个功能丰富、外观精美的博客系统。无论你是刚接触 Web 开发&#xff0c;还是经验丰富的程序员&#xff0c;这个教程都将带你step by…

Linux网络编程 --- Socket编程

前言 首先看看TCP/IP网络协议和在我们计算机系统层次中的对应关系。 socket的位置 网络通信的本质就是贯穿网络协议层的过程。 局域网数据的封装和解包过程 逻辑上我们认为同层协议之间通信 几乎任何层的协议都会提供一种解包和分用的功能。 几乎任何层的协议&#xff…

FPGA实现SDI视频H265压缩网络推流输出,基于VCU架构,支持12G-SDI 4K60帧,提供工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我这里已有的视频图像编解码方案本博已有的 SDI 编解码方案 3、详细设计方案设计框图FPGA开发板视频输入SDI硬件均衡器LMH1219UHD-SDI GT SDI视频解串SMPTE UHD-SDI RX SUBSYSTEM SDI视频解码Video Frame Buffer WriteZynq UltraS…

Apollo Planning模块中的Hybird A*算法

文章目录 流程图OpenSpacePlanner算法与周边模块关系OpenSpacePlanner与PublicRoadPlanner关系Hybird A*流程Hybird A*外部调用入口Hybird A*内部流程 Hybird A*代码逻辑主函数Plan碰撞检测ReedsShepp曲线加速搜索扩展相邻的节点计算节点的代价路径后处理路径分割轨迹平滑&…

android AccessibilityService合法合规增加小红书曝光阅读量(2024-09-02)

免责任声明: 任何可操作性的内容与本人无关,文章内容仅供参考学习&#xff0c;如有侵权损害贵公司利益&#xff0c;请联系作者&#xff0c;会立刻马上进行删除。 一、分析 目前可增加曝光阅读流量渠道入口&#xff08;完成&#xff09; 1. 发现页 打开小红书app选择顶部发现页&…

【网络世界】网络层

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 网络层 &#x1f4c1; IPV4 &#x1f4c2; 什么是IP地址 &#x1f4c2; 网段划分 &#x1f4c2; 特殊IP &#x1f4c2; 内网和公网 &#x1f4c2; IPV4的危机 &#x1f4c1; IP协议格式 &#x1f4c1; 路由 &#x1f…

VSCode+Keil协同开发之Keil Assistant

VSCodeKeil协同开发之Keil Assistant 目录 VSCodeKeil协同开发之Keil Assistant1. 效果展示2. Keil Assistant简介3. Keil Assistant功能特性4. 部署步骤4.1. 部署准备4.2. 安装Keil Assistant插件4.3. 配置Keil Assistant插件 5. Keil Assistant使用6. 总结 大家在单片机开发时…

密码学基础

一、理论知识 科尔霍夫原则 1、对于一个密码学系统&#xff0c;应当仅有密钥是保密的&#xff0c;其余算法和一切参数都应该是公开的 2、并不一定要数学上完全不可破解&#xff0c;只要在现实中不可能破解即可 对称加密 加密解密都使用相同的密钥 非对称加密 1、加密解密…

【iOS】通过第三方库Masonry实现自动布局

目录 前言 约束 添加约束的规则 使用Masonry自动布局 Masonry的常见使用方法 补充 前言 在暑期完成项目时&#xff0c;经常要花很多时间在调试各种控件的位置上&#xff0c;因为每一个控件的位置都需要手动去计算&#xff0c;在遇到循环布局的控件时&#xff0c;还需要设…

【安当产品应用案例100集】014-使用安当TDE实现达梦数据库实例文件的透明加密存储

随着数据安全重要性的不断提升&#xff0c;数据库文件的落盘加密已成为数据保护的一项基本要求。达梦数据库作为一款高性能的国产数据库管理系统&#xff0c;为用户提供了一种高效、安全的数据存储解决方案。本文将详细介绍如何利用安当KSP密钥管理平台及TDE透明加密组件来实现…

OpenAI即将推出自然语音功能

&#x1f989; AI新闻 &#x1f680; OpenAI即将推出自然语音功能 摘要&#xff1a;测试博客testingcatalog揭示OpenAI正在通过逆向工程ChatGPT应用&#xff0c;计划增加更自然的语音朗读功能。未来可能推出8种新语音&#xff0c;具有独特代号&#xff0c;能表达动物叫声等非…

【kafka】在Linux系统中部署配置Kafka的详细用法教程分享

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

华为云征文|部署电影收藏管理器 Radarr

华为云征文&#xff5c;部署电影收藏管理器 Radarr 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 应用场景1.3 性能模式 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Radarr3.1 Radarr 介绍3.2 Docker 环境搭建3.3 Radarr 部署3.4 Rada…

Django 第十三课 -- Form 组件

Django Form 组件用于对页面进行初始化&#xff0c;生成 HTML 标签&#xff0c;此外还可以对用户提交的数据进行校验&#xff08;显示错误信息&#xff09;。 报错信息显示顺序&#xff1a; 先显示字段属性中的错误信息&#xff0c;然后再显示局部钩子的错误信息。若显示了字…

如何打造高校实验室预约系统?Java SpringBoot助力高效管理,MySQL存储数据,Vue前端展现,四步实现学生轻松预约!

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…

已解决centos7 yum报错:cannot find a valid baseurl for repo:base/7/x86_64的解决方案

出现cannot find a valid baseurl for repo:base/7/x86_64错误通常是由于YUM仓库源无法找到或无法访问&#xff0c;导致YUM无法正常工作。这种情况常见于CentOS 7系统。解决这个问题需要检查几个方面&#xff0c;如网络连接、DNS设置和YUM仓库源配置。 &#x1f9d1; 博主简介&…

思科交换机端口安全配置1

#网络安全技术实现# #任务一交换机端口安全配置1# #1配置计算机的IP 地址、子网掩码和网关 #2配置交换机B的主机名称&#xff0c;创建vlan 10和vlan 20&#xff0c;将f0/1、2划入vlan 10&#xff0c;f0/3、4划入vlan 20&#xff0c;将f0/24配置为Trunk Switch(config)#hostna…

修改服务器DNS解析及修改自动对时时区

修改服务器DNS解析&#xff1a; 1、搜索一下当地的DNS服务器的地址 2、登录服务器&#xff0c;执行 vim /etc/resolv.conf文件&#xff0c;在nameserver字段后填写DNS服务的地址 3、chattr i /etc/resolv.conf 加上不可修改权限&#xff0c;防止重启DNS被修改 修改自动对时…

解读GaussianTalker:利用音频驱动的基于3D高斯点染技术的实时高保真讲话头像合成

单位&#xff1a;首尔大学 项目地址&#xff1a;https://ku-cvlab.github.io/GaussianTalker/ github&#xff1a;https://github.com/KU-CVLAB/gaussiantalker 本文是对GaussianTalker的解读&#xff0c;欢迎大家阅读指正&#xff01; 目录 前言摘要一、背景介绍二 相关工作三…

centos 7部署nacos 2.4.1版本单点方式

文章目录 Nacos&#xff1a;微服务架构中的服务发现与配置管理利器官方网址引言Nacos简介Nacos的核心功能1. 服务发现和服务健康监测2. 动态配置服务3. 服务及其元数据管理 Nacos的工作原理Nacos的集群部署与高可用性Nacos的使用场景如何使用Nacos1. 安装Nacos2. 服务注册与发现…