【css】创建一个带有上矩形和下倒三角角标

在这里插入图片描述

涉及到的主要CSS属性:

clip-path:使用CSS剪切路径属性创建上矩形和下倒三角形的形状。
transform: scale(0.8);:缩小角标的大小,使其看起来更协调。

完整html及css:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>上面矩形下面倒三角的角标</title><style>.corner-badge {position: relative;display: inline-block;padding: 10px 42px 10px 10px;background: #f4f4f5;}.corner-badge .badge {position: absolute;top: 0;right: 0;background-color: #fe0b36;color: white;font-size: 12px;font-weight: bold;padding: 4px 5px 10px;clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);transform: scale(0.8);}</style></head><body><div class="corner-badge"><span>XXXX</span><div class="badge">最XX</div></div></body>
</html>

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

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

相关文章

java-System 概述 2

### 6. System类的设计原则 System类的设计体现了许多Java设计原则&#xff0c;包括封装、单一职责、模块化和高内聚性。以下是一些具体的设计原则和它们在System类中的体现&#xff1a; #### 6.1 封装 封装是面向对象编程的基本原则之一&#xff0c;它通过隐藏对象的内部实…

RSA加密Java与Python通用版

前情提要&#xff1a;架构中有两个系统&#xff0c;一个JAVA,一个PYTHON&#xff0c;之间的数据传输需要进行加密解密。 于是做了一个统一的工具。两系统之间可以相互加解密。 目录 一、JAVA 二、PYTHON 一、JAVA <!-- https://mvnrepository.com/artifact/org.bouncycas…

PAT B1008. 数组元素循环右移问题

题目描述 一个数组A中存有N(N>O)个整数&#xff0c;在不允许使用另外数组的前提下&#xff0c;将每个整数循环向右移M(M≥0)个位置,即将A中的数据由( …)变换为(……)(最后M个数循环移至最前面的M个位置)。如果需要考虑程序移动数据的次数尽量少,则应如何设计移动的方法?输…

Harbor本地仓库搭建002_Harbor负载均衡节点搭建_nginx安装配置_harbor安装---分布式云原生部署架构搭建002

负载均衡的机器. 可以看到上面是安装nginx的过程 首先去编辑一下yum仓库地址,配置一下nginx的仓库地址 然后这个是配置的内容 然后在进行安装之前最好yum makecache fast 更新一下缓存,这样安装的时候 会安装最新的包 然后就可以安装nginx yum -y install nginx 然后去

设备档案包括哪些内容

设备档案通常包括以下内容和要求&#xff1a; 1. 设备基本信息&#xff1a;包括设备名称、型号、规格、生产厂商、出厂日期、购买日期等。 2. 设备安装信息&#xff1a;包括设备的安装位置、安装日期、安装人员等。 3. 设备维护信息&#xff1a;包括设备的维护保养记录&#xf…

C++类与对象、类的6个默认成员函数、构造函数、析构函数等的介绍

文章目录 前言一、类的6个默认成员函数二、构造函数1. 概念2. 特性1. 无参构造函数2. 带参构造函数3. 编译器默认生成的无参构造函数 3. 构造函数的初始化4. 默认构造函数 三、析构函数1. 概念2. 特性3. 编译器默认生成的析构函数的作用4. 构造函数的使用 总结 前言 C类与对象…

GLM4-9B-Chat模型LoRA微调

文本记录GLM4-9B-Chat模型进行LoRA微调的过程。 一、环境&#xff1a; 操作系统: Ubuntu 22.04CUDA: 12.1GPU: 3090 x 2 创建conda环境&#xff1a; conda create -n glm4 python3.10.14 conda activate glm4cd /home/data/chatglm4-finetune 二、数据准备 运行d…

Java学习 - Docker管理和容器命令 实例

docker管理 查看docker版本&#xff0c;检测是否可用 sudo docker version查看docker 系统信息 sudo docker infodocker容器命令 容器状态 容器标识 容器长uuid容器短uuid容器名字 查看容器状态 sudo docker status [容器标识1] [容器标识2] [容器标识n]深入查看容器信息 su…

docker容器中连接宿主机mysql数据库

最近要在docker中使用mysql数据库&#xff0c;首先考虑在ubuntu的镜像中安装mysql&#xff0c;这样的脚本和数据库都在容器中&#xff0c;直接访问localhost&#xff1a;3306&#xff0c;脚本很简单&#xff0c;如下&#xff1a; import pymysql# 建立数据库连接 db pymysql.…

HTML5基本语法

文章目录 HTML5基本语法一、基础标签1、分级标题2、段标签3、换行及水平线标签4、文本格式标签 二、图片标签1、格式2、属性介绍 三、音频标签1、格式2、属性介绍 四、视频标签1、格式2、属性介绍 五、链接标签1、格式2、显示特点3、属性介绍4、补充&#xff08;空链接&#xf…

虚设备与Spooling技术

虚设备&#xff08;Virtual Device&#xff09;和Spooling技术是操作系统中用于提高输入/输出&#xff08;I/O&#xff09;效率的两种技术。下面分别对它们进行解释&#xff1a; ### 虚设备&#xff08;Virtual Device&#xff09; 虚设备是一种软件技术&#xff0c;它允许多个…

安装stable-baselines3[extra]

新方法&#xff1a; %pip install AutoROM.accept-rom-license0.4.2 %pip install stable-baselines3[extra]旧方法&#xff1a; https://www.atarimania.com/rom_collection_archive_atari_2600_roms.html https://drive.google.com/file/d/1uuPaYGf2f4DaEUJkS36LvSEWokgC8qj…

拼多多,藏着水果版中国地图

越来越多人开始在拼多多买水果。在发现这个现象后&#xff0c;我询问他们同一个问题&#xff1a;“那你收到过烂掉的吗&#xff1f;” 几乎所有频繁下单的人都告诉我&#xff0c;收到过。他们在拼多多买全国各地的水果&#xff0c;偶尔收到烂掉的&#xff0c;但依然会继续在拼…

OpenCloudOS 8.8 一键安装 Oracle 11GR2 单机

前言 Oracle 一键安装脚本&#xff0c;演示 OpenCloudOS 8.8 一键安装 Oracle 11GR2 单机&#xff08;231017&#xff09;过程&#xff08;全程无需人工干预&#xff09;。 ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库 安装准备 1、安装好操作系统&#xff0c;建…

工业物联网关为智能制造业提供哪些支撑?天拓四方

随着科技的飞速发展&#xff0c;智能制造业已成为工业领域的转型方向。在这一转变中&#xff0c;工业物联网关发挥着至关重要的作用。作为连接物理世界与数字世界的桥梁&#xff0c;工业物联网关不仅实现了设备与设备、设备与云平台之间的互联互通&#xff0c;更通过实时数据采…

设计模式(五)创建者模式之工厂模式

工厂模式 工厂模式上面类图代码实现Coffee 抽象类AmericanCoffeeLatterCoffeeCoffeeStoreUser 简单工厂模式增加工厂方法更改CoffeeStore 类优缺点扩展静态工厂 工厂方法模式概念结构具体类图代码实现Coffee类AmericanCoffeeLatterCoffee抽象工厂CoffeeFactoryAmericanCoffeeFa…

Android studio中如何下载sdk

打开 file -> settings 这个页面, 在要下载的 SDK 前面勾上, 然后点 apply 在 platforms 中就可以看到下载好的 SDK: 如果sdk下载失败是不是硬盘没有权限&#xff0c;管理员权限从启android studio运行下载sdk

MySQL 基本语法讲解及示例(上)

第一节&#xff1a;MySQL的基本操作 1. 创建数据库 在 MySQL 中&#xff0c;创建数据库的步骤如下&#xff1a; 命令行操作 打开 MySQL 命令行客户端或连接到 MySQL 服务器。 输入以下命令创建一个数据库&#xff1a; CREATE DATABASE database_name;例如&#xff0c;创建一…

android 常用工具

adb root adb root adb remountadb logcat # clear adb logcat -c# 记录到文件adb logcat -v time > log.txtadb 查看当前运行包名 adb shell "dumpsys window|grep mCurrentFocus"查案GPU dumpsys gfxinfo dumpsys gfxinfo package# 显卡使用情况 cat /sys/…

明星直播带货 即将走向终结

在用户看来是演员、明星的人。在电商看来只是没有变现的流量而已。 但是明星直播带货即将走向终结&#xff0c;这可能是历史的必然。双十一&#xff0c;贾乃亮直播间宣称 2, 899 的羽绒服只卖449&#xff0c;但是后续被网友发现在其他地方同款居然只要 220 到 270 之间。 贾乃…