css实现上下左右对勾选中状态角标

🍥左上角

🍥右上角

🍥左下角

🍥右下角:


🍥左上角:

  .blueBackground {position: relative;border: 1px solid #91c7f3;background: #F0F8FF !important;&:after {content: "";position: absolute;top: 0;left: 0;border-top: 17px solid #2D52D8FF;border-right: 17px solid transparent;}&:before {content: "";position: absolute;width: 8px;height: 4px;background: transparent;top: 4px;left: 0px;border: 1.5px solid white;border-top: none;border-right: none;-webkit-transform: rotate(-50deg);-ms-transform: rotate(-50deg);transform: rotate(-50deg);z-index: 9;}
}


🍥 右上角:

  .blueBackground {position: relative;border: 1px solid #91c7f3;background: #F0F8FF !important;&:after {content: "";position: absolute;top: 0;right: 0;border-top: 17px solid #2D52D8FF;border-left: 17px solid transparent;}&:before {content: "";position: absolute;width: 8px;height: 4px;background: transparent;top: 4px;right: 0px;border: 1.5px solid white;border-top: none;border-right: none;-webkit-transform: rotate(-50deg);-ms-transform: rotate(-50deg);transform: rotate(-50deg);z-index: 9;}}

🍥左下角:

.blueBackground {position: relative;border: 1px solid #91c7f3;background: #F0F8FF !important;&:after {content: "";position: absolute;bottom: 0;left: 0;border-bottom: 17px solid #2D52D8FF;border-right: 17px solid transparent;}&:before {content: "";position: absolute;width: 8px;height: 4px;background: transparent;bottom: 4px;left: 0px;border: 1.5px solid white;border-top: none;border-right: none;-webkit-transform: rotate(-50deg);-ms-transform: rotate(-50deg);transform: rotate(-50deg);z-index: 9;}}

🍥右下角: 

.blueBackground {position: relative;border: 1px solid #91c7f3;background: #F0F8FF !important;&:after {content: "";position: absolute;bottom: 0;right: 0;border-bottom: 17px solid #2D52D8FF;border-left: 17px solid transparent;}&:before {content: "";position: absolute;width: 8px;height: 4px;background: transparent;bottom: 4px;right: 0px;border: 1.5px solid white;border-top: none;border-right: none;-webkit-transform: rotate(-50deg);-ms-transform: rotate(-50deg);transform: rotate(-50deg);z-index: 9;}}

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

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

相关文章

今天发现个有意思的问题:java基础篇章网络编程的报错问题,顺便看一下各个GPT的实力

问题: 一个java socket网络编程的引发的异常,具体代码Client.java、Server.java,如下 Client.java package Test2;import java.io.*; import java.net.Socket;public class Client {public static void main(String[] args) throws IOExce…

✌粤嵌—2024/5/6—盛最多水的容器

代码实现&#xff1a; 方法一&#xff1a;暴力解法 #define min(a, b) ((a) > (b) ? (b) : (a)) #define max(a, b) ((a) > (b) ? (a) : (b))int maxArea(int *height, int heightSize) {int ans 0;for (int i 0; i < heightSize; i) {for (int j i; j < heig…

武汉星起航:跨境电商行业领航者,一站式孵化服务引领全球趋势

在全球化日益深入的今天&#xff0c;跨境电商作为连接各国市场的桥梁&#xff0c;其重要性日益凸显。在这一潮流中&#xff0c;武汉星起航电子商务有限公司以其前瞻性的战略眼光和丰富的运营经验&#xff0c;迅速崛起为跨境电商行业的领军者。公司不仅自营亚马逊跨境电商业务&a…

一、Redis五种常用数据类型

Redis优势&#xff1a; 1、性能高—基于内存实现数据的存储 2、丰富的数据类型 5种常用&#xff0c;3种高级 3、原子—redis的所有单个操作都是原子性&#xff0c;即要么成功&#xff0c;要么失败。其多个操作也支持采用事务的方式实现原子性。 Redis特点&#xff1a; 1、支持…

核心代码分析

核心代码分析 下面的代码主要有两个作用 判断是否为扫描器或者密码爆破工具&#xff0c;进行交互握手&#xff0c;效果是扫描器直接爆3306弱口令。如果是直接连接&#xff0c;去读取设定好的文件&#xff0c;并写入本地保存。 这些函数用于从MySQL数据库中获取指定文件的内容…

3D+仿真分析:高效实现海底石油管道系统设计

Bentley AutoPIPE 助力节省寻找更佳管道路线所需的时间和成本 评估管道完整性以提高石油产量 从墨西哥湾浅水区开采石油通常需要铺设新的海底管道&#xff0c;从而在高压和高温条件下高效、安全地输送原油。 Grupo EspecializadoenObras Marinas (GEOMSA) 是墨西哥湾管道—土体…

iOS ------ JSONModel源码

一&#xff0c;JSONModel的基本使用 1&#xff0c;基本使用方法 - (instancetype)initWithDictionary:(NSDictionary *)dict error:(NSError **)err; - (instancetype)initWithData:(NSData *)data error:(NSError **)error; - (instancetype)initWithString:(NSString *)str…

239 基于matlab的EKF(扩展卡尔曼滤波)_UKF(无迹卡尔曼滤波)_PF(粒子滤波)三种算法的估计结果比较

基于matlab的EKF(扩展卡尔曼滤波)_UKF(无迹卡尔曼滤波)_PF&#xff08;粒子滤波&#xff09;三种算法的估计结果比较&#xff0c;输出估计误差&#xff0c;并单独对粒子滤波进行估计及其置信区间可视化。程序已调通&#xff0c;可直接运行。 239 EKF(扩展卡尔曼滤波) - 小红书 …

Linux中gcc/g++的使用

文章目录 前言gcc/g 前言 gcc和g即为编译器。其中gcc为c语言的编译器&#xff0c;只能编译c语言&#xff1b;g为c的编译器&#xff0c;既能编译c语言&#xff0c;又能编译c。 在前面的文章中&#xff0c;我们提到代码转换成可执行程序需要经过 预处理&#xff08;进行宏替换)…

Transformer全流程细致讲解

文章目录 1. Transformer 架构概述2. 编码器&#xff08;Encoder&#xff09;2.1 输入嵌入层&#xff08;Input Embedding Layer&#xff09;2.1.1 一个简单的示例 2.2 位置编码&#xff08;Positional Encoding&#xff09;2.2.1 Transformer中采用的位置编码方式2.2.2 公式中…

创新指南|组织健康仍然是企业创新长期绩效的关键

麦肯锡关于组织健康的最新调查结果表明&#xff0c;它仍然是当今全球市场中价值创造的最佳预测者和竞争优势的可持续来源。在本文中&#xff0c;我们将探讨最新的 OHI 结果&#xff0c;并重点介绍该指数揭示的有关领导力、数据和技术以及人才管理的一些更引人注目的见解。我们还…

uniapp文本框上下滚动问题

一个基本需求&#xff0c;textarea标签没有办法通过手拖动的方式进行滚动&#xff0c;当文字超出其容量后&#xff0c;想要编辑上面被遮挡部分的文字这边难以点到&#xff0c;电脑可以鼠标滚轮&#xff0c;但手机需要拖动但无效&#xff1a; 下面提供了我的解决思路&#xff1a…