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.mzph.cn/news/836697.shtml

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

相关文章

黏土滤镜教程分享:让你的照片瞬间变身黏土艺术

在数字时代的浪潮中,手机摄影和修图软件成为了我们日常生活中不可或缺的一部分。而近期,一款名为“黏土滤镜”的修图功能火爆全网,让无数摄影爱好者和创意达人为之疯狂。本文将为你详细介绍几款拥有黏土滤镜功能的软件,并附上详细…

RiPro主题美化【支付弹窗底部提示语根据入口不同有不同的提示】ritheme主题美化RiProV2 增加支付提示语,按支付类型不同,入口不同提示语不同的设置

RiPro主题美化【支付弹窗底部提示语根据入口不同有不同的提示】ritheme主题美化RiProV2 增加支付提示语,按支付类型不同,入口不同提示语不同的设置 背景: 接上文:https://www.uu2id.com/827.html 付费组件在以下几个地方会弹出:1)文章隐藏内容付费;2)付费资源下载;3…

【R语言篇】医学生福音,全球疾病负担数据库GBD 2021即将更新!!!

今天介绍即将于5月16日更新的全球疾病负担数据库GBD 2021,相信数据一经发表,过不了多久pubmed又将涌现一大波疾病负担相关文章。 Global Burden of Disease Study 2021 (GBD 2021) Data Resources | GHDx 在查找GBD相关文献方面,我个人还是比…

Redis数据结构扩容源码分析

1 Redis数据结构 redis的数据存储在dict.中,其数据结构为(c源码) ypedef struct dict { dictType *type; //理解为面向对象思想,为支持不同的数据类型对应dictType抽象方法,不同的数据类型可以不同实现 void *privdata; //也可不同的数据类…

10个免费视频素材网站,剪辑师们赶紧收藏!

在快速发展的数字媒体时代,寻找高质量的视频和音频素材成为了多数内容创作者的日常需求。无论是企业宣传、个人创作还是社交媒体更新,优秀的素材不仅能增强视觉效果,还能提高信息传播效率。以下是一些优质的免费素材网站,它们提供…

Eduma – WordPress教育培训机构主题

下载地址:Eduma – WordPress教育培训机构主题 这个主题的设计理念是让你的教育和在线学习服务在最高水平上闪耀。Eduma具有多种功能,使其成为展示教育和在线学习服务的理想选择。 Eduma使用AJAX创建,这意味着在页面浏览过程中,页…

pdf 版面分析与优化策略

1. 简介 版面分析作为RAG的第一步工作,其效果对于下游工作至关重要。 前常见的 PDF 解析方法包括三种 基于规则:根据 PDF 的组织特征确定每个部分的规则(风格和内容)缺点:不通用(PDF格式不固定&#xf…

GPT搜索引擎原型曝光!

OpenAI发布会前一天,员工集体发疯中……上演大型套娃行为艺术。 A:我为B的兴奋感到兴奋;B:我为C的兴奋感到兴奋……Z:我为这些升级感到兴奋 与此同时还有小动作不断,比如现在GPT-4的文字描述已不再是“最先…

618购物节适合入手的数码好物有哪些?实用闭眼冲的数码好物清单

随着618购物节的临近,数码爱好者们纷纷翘首以盼,期待着在这个年度大促中寻觅到心仪的数码好物,无论是提升工作效率的办公利器,还是丰富业余生活的娱乐设备,数码产品在我们的日常生活中扮演着越来越重要的角色&#xff…

电路板维修【三】

自恢复保险丝: 自恢复保险丝属于慢断类型保险丝,自恢复保险丝的材料因为通电后发热,当电流过大发热到一定程度的时候,材料就不导电了,这个和普通的保险丝是一个道理,只不过普通的保险丝是一次型熔断而已。…

【5月13日】YesPMP平台目前最新项目

YesPMP平台目前最新项目,有感兴趣的用户查看项目接单,与项目方沟通,双方直接对接。 1.查看项目:blender动画师 2查看项目:找宠友信息源码 3.查看项目:儿童…

ComfyUI 完全入门:必备插件

大家好,我是每天分享AI应用的萤火君! ComfyUI 是一个基于 Stable Diffusion 的AI绘画创作工具,最近发展势头特别迅猛,但是 ComfyUI 的上手门槛有点高,用户需要对 Stable Diffusion 以及各种数字技术的原理有一定的了解…

【Web】CTFSHOW 月饼杯 题解(全)

目录 web1_此夜圆 web2_故人心 web3_莫负婵娟 web1_此夜圆 拿到源码&#xff0c;一眼字符串逃逸 本地测一测&#xff0c;成功弹出计算器 <?phpclass a {public $uname;public $password;public function __wakeup(){system(calc);} }function filter($string){retur…

全新Transformer模型:全球与局部双重突破!

DeepVisionary 每日深度学习前沿科技推送&顶会论文分享&#xff0c;与你一起了解前沿深度学习信息&#xff01; 引言&#xff1a;探索视觉变换器在对象重识别中的全局与局部特征 在对象重识别&#xff08;Re-ID&#xff09;的研究领域中&#xff0c;如何有效地从不同时间…

奇舞周刊第527期:​Virtual DOM(虚拟DOM) 的地位再一次被挑战 !!!

奇舞推荐 ■ ■ ■ Virtual DOM&#xff08;虚拟DOM&#xff09; 的地位再一次被挑战 &#xff01;&#xff01;&#xff01; 最近在前端圈有一个 Github Repo 算是蛮受关注的 - proposal-signals&#xff0c;这是一个由 Daniel Ehrenberg 为主导&#xff0c;向 TC39 提案的项目…

26版SPSS操作教程(高级教程第二十章)

目录 前言 粉丝及官方意见说明 第二十章一些学习笔记 第二十章一些操作方法 神经网络与支持向量机 人工神经网络&#xff08;artificial neural network&#xff0c;ANN&#xff09; 假设数据 具体操作 结果解释 对案例的进一步分析 结果解释 ​编辑 尝试将模型复…

自动驾驶技术与传感器数据处理

目录 自动驾驶总体架构 感知系统 决策系统 定位系统 ​计算平台​ 仿真平台​ 自动驾驶公开数据集 激光点云 点云表征方式 1) 原始点云 2) 三维点云体素化 3)深度图 4)鸟瞰图 点云检测障碍物的步骤 PCL点云库 车载毫米波雷达 车载相机 设备标定 自动驾驶…

Matlab如何导出高质量论文插图?科研效率UpUp第8期

当你用Matlab绘制了一张论文插图&#xff1a; 想要所见即所得&#xff0c;原封不动地将其保存下来&#xff0c;该怎么操作呢&#xff1f; 虽说以前总结过7种方法&#xff08;Matlab导出论文插图的7种方法&#xff09;&#xff0c;但要说哪一种可以满足上面的要求&#xff0c;想…

UV胶固化时使用的UV灯要如何选择才适合!

近日&#xff0c;在使用UV灯固化 UV胶的过程中&#xff0c;遇到了不同的问题&#xff0c;最基本的就是很多人对于固化UV胶时&#xff0c;使用什么样的UV灯不清楚&#xff0c;从而导致了UV胶在实际使用过程中没有固化&#xff0c;或者没有完全固化&#xff0c;胶水仍处是液体流动…

2024年AIGC发展趋势报告

来源&#xff1a;靠谱二次元 AIGC&#xff0c;即人工智能生成内容&#xff0c;是近年来在人工智能领域兴起的一项重要技术。 它通过使用机器学习和深度学习等技术&#xff0c;使得计算机能够自动生成各种形式的数字内容&#xff0c;如文本、图像、音频和视频等。 AIGC的发展可…