前端 css 实现标签的效果

效果如下图

直接上代码:

<div class="label-child">NEW</div>

// css样式

// 父元素 class

.border-radius {

    position: relative;

    overflow: hidden;

}

.label-child {

    position: absolute;

    width: 150rpx;

    height: 27rpx;

    text-align: center;

    left: -24px;

    top: 7px;

    line-height: 31rpx;

    font-size: 20rpx;

    font-weight: 600;

    background-color: #fe4f2f;

    border-color: #fe4f2f;

    color: #fff;

    transform: rotate(-45deg);

}

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

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

相关文章

JavaScript中的this

在实际应用中&#xff0c;了解 this 的行为是非常重要的&#xff0c;特别是在编写库或框架时&#xff0c;或者当你需要在回调函数中访问特定的上下文时&#xff0c;通常推荐使用箭头函数或者其他方法来确保 this 的正确指向。 在ES6中&#xff0c;this 的值取决于它是如何被调用…

web服务器nginx下载及在win11的安装

一.背景 还是为了公司安排的师带徒任务。 操作系统版本&#xff1a;win11 家庭版 mginx版本&#xff1a;1.24.0 二.nginx版本选择与下载 我之前也写过下载nginx下载_ngnix stable 下载-CSDN博客 不想看寻找过程的&#xff0c;直接点这里去下载https://nginx.org/download…

Docker 使用原理流程

# docker 是如何来的&#xff1f; a. linux 内核本身支持容器技术&#xff0c;LXC (市面上有很多基于 LXC 开发的容器管理软件&#xff0c;如创建容器&#xff0c;查看容器&#xff0c;管理容器&#xff0c; docker 作为管理容器的一款代表工具软件) b. 容器的作用&#xff0c;…

利用python批量将.shp文件转换坐标生成.geojson文件,再将.geojson转换成.csv文件,最后将csv文件插入数据库表

第一步&#xff1a;.shp批量转.geojson # author: JMY # 创建时间: 2024/2/26 17:12 # 批量将.shp文件生成geojson文件并转换坐标为3857import os import geopandas as gpd# 定义输入和输出文件夹路径 input_folder shp文件 output_folder geojson文件# 定义输入和输出坐标系…

【王道操作系统】ch1计算机系统概述-04操作系统结构

文章目录 【王道操作系统】ch1计算机系统概述-04操作系统结构操作系统的内核操作系统的体系结构考纲新增内容&#xff08;红色为全新内容&#xff0c;黄色为原有内容&#xff09;&#xff1a;01 分层结构02 模块化03 宏内核&#xff08;大内核&#xff09;和微内核04 外核 【王…

redis03 八种数据类型

思维草图 String类型 字符串类型&#xff0c;是redis中最简单的存储类型&#xff0c;可以包含任何数据&#xff0c;例如jpg图片或者序列化的对象等&#xff0c;底层都是以字节数组形式存储&#xff0c;最大能存储512MB的数据。 常用命令 KEY命名规范 加前缀&#xff0c;分…

802.11局域网的 MAC 帧

目录 802.11 局域网的 MAC 帧 802.11 数据帧的三大部分 1.关于 802.11 数据帧的地址 最常用的两种情况 2.序号控制字段、持续期字段和帧控制字段 802.11 局域网的 MAC 帧 802.11 帧共有三种类型&#xff1a;控制帧、数据帧和管理帧。 802.11 数据帧的三大部分 MAC 首部&…

总结springboot启动jar,指定配置文件

第一&#xff1a;覆盖 -- 覆盖系统中的文件中的application-dev.yml文件&#xff0c;两种指定方法都可以 springboot默认优先读取application.properties>application.yml>指定文件(application-dev.yml) 公共配置可以在application.yml&#xff0c;其他配置在applicatio…

基于 STM32U5 片内温度传感器正确测算温度

目录预览 1、引言 2、问题 3、小结 01 引言 STM32 在内部都集成了一个温度传感器&#xff0c;STM32U5 也不例外。这个位于晶圆上的温度传感器虽然不太适合用来测量外部环境的温度&#xff0c;但是用于监控晶圆上的温度还是挺好的&#xff0c;以防止芯片过温运行。 02 问题…

C# - 类与类之间的继承关系判断

Type.IsSubclassof(Type type) 作用&#xff1a;用来确定 一个类是否派生自另一个类/ValueType/Enum/委托 不能用于确定&#xff1a;接口是派生自另一个接口&#xff0c;还是类实现接口 class A{} class B : A{}A a; B b;var boo b.GetType().IsSubclassOf(typeof(A)) // t…

sqllabs第五关floor报错注入

实验环境sqllabs第五关 floor()报错注入的原因是group by在向临时表插入数据时&#xff0c;由于rand()多次计算导致插入临时表时主键重复&#xff0c;从而报错&#xff0c;又因为报错前concat()中的SQL语句或函数被执行&#xff0c;所以该语句报错且被抛出的主键是SQL语句或函…

go语言中的协程和Java中线程以及进程的区别

理解 Go 语言中的协程&#xff08;Goroutine&#xff09;、Java 中的线程和进程之间的区别可以从以下几个方面来看&#xff1a; 轻量性&#xff1a; Goroutine&#xff08;协程&#xff09;&#xff1a; 协程是非常轻量级的执行单位&#xff0c;创建和销毁的成本很低。在 Go 中…

深入理解Lambda表达式:基础概念与实战演练【第114篇—python:Lambda表达式】

深入理解Lambda表达式&#xff1a;基础概念与实战演练 在现代编程语言中&#xff0c;Lambda表达式作为一种轻量级的匿名函数形式&#xff0c;越来越受到程序员的青睐。特别是在函数式编程兴起的今天&#xff0c;Lambda表达式在简化代码、提高可读性方面发挥着重要作用。本文将…

C++笔记(六)--- 静态成员变量/函数(static)

目录 C语言中静态变量 C静态成员变量 C静态成员函数 C语言中静态变量 1.函数内部用static修饰的变量&#xff0c;只能在此函数使用&#xff0c;但所修饰的变量不随函数释放而释放&#xff0c;下次调用时的值仍为上次结束时的值2.static修饰的全局变量只能在其定义的文件使用…

华为OD技术面试案例6-2024年

个人情况&#xff1a;西电本&#xff0c;二战某985基本寄了。知识储备方面&#xff1a;无任何408基础&#xff0c;学校开过数据结构课程60分过&#xff0c;python纯靠自学&#xff0c;无任何刷题经验&#xff0c;无项目经验&#xff0c;简历东拼西凑。 大概是12月底和OD联系&a…

数据可视化原理-腾讯-热力图

在做数据分析类的产品功能设计时&#xff0c;经常用到可视化方式&#xff0c;挖掘数据价值&#xff0c;表达数据的内在规律与特征展示给客户。 可是作为一个产品经理&#xff0c;&#xff08;1&#xff09;如果不能够掌握各类可视化图形的含义&#xff0c;就不知道哪类数据该用…

CSP-201712-2-游戏

CSP-201712-2-游戏 解题思路 初始化变量&#xff1a;定义整数变量n和k&#xff0c;分别用来存储小朋友的总数和淘汰的特定数字。然后定义了num&#xff08;用来记录当前报的数&#xff09;和peopleIndex&#xff08;用来记录当前报数的小朋友的索引&#xff09;。 初始化小朋…

MATLAB环境下基于离散小波变换的体外血管图像处理

下面简要介绍小波变换的部分应用。 信号去噪。小波去噪是根据有效信号和噪声信号在小波变换后表现出的不同特性实现的&#xff0c;一般可用于去除语音、图像、视频等中的噪声信号。小波去噪方法根据对小波系数的非线性处理方式分为三类&#xff0c;分别是小波变换模极大值去噪…

电子电器架构新趋势 —— 最佳着力点:域控制器

电子电器架构新趋势 —— 最佳着力点&#xff1a;域控制器 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师…

备战蓝桥杯---状态压缩DP基础1之棋盘问题

它只是一种手段&#xff0c;一种直观而高效地表示复杂状态的手段。 我们先来看一道比较基础的&#xff1a; 直接DFS是肯定不行&#xff0c;我们发现对某一行&#xff0c;只要它前面放的位置都一样&#xff0c;那么后面的结果也一样。 因此我们考虑用DP&#xff0c;并且只有0/…