css 写带三角形的对话框,空心的三角形边框

首先,我们要会先实现一个小三角形;

思路:利用元素的 border 属性,将其三个方向的 border-color 值设为透明色(或者和其父元素的背景色一致,形成视觉差,俗称障眼法),剩下一个方向的 border-color 的值即为你需求的三角形的颜色。

重点!!!!!

 

span 画一个三角形,然后span 的伪类画一个和背景色一样的小一点点的三角形,摞在一起,注意一下z-index,然后就完成啦

<div class="select"><span></span><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div></div>
<style lang='less' scoped>.select {width: 218px;background: #012e30;box-shadow: 0px 18px 56px 16px rgba(0, 255, 236, 0.05), 0px 12px 32px 0px rgba(0, 255, 236, 0.08),0px 6px 12px -8px rgba(0, 221, 213, 0.12);//   opacity: 0.9;border: 2px solid #00ffec;border-radius: 4px;position: absolute;top: 64px;right: 0px;z-index: 2;opacity: 0.9;span {display: block;width: 0;height: 0;border-top: 16px solid transparent;border-right: 16px solid transparent;border-bottom: 16px solid #00ffec;border-left: 16px solid transparent;position: absolute;right: 5px;top: -30px;&::after {content: '';display: block;width: 0;height: 0;border-top: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 14px solid #012e30;border-left: 14px solid transparent;position: absolute;right: -14px;top: -11px;z-index: 3;}}
}
.selectItem {line-height: 56px;padding-left: 12px;font-size: 24px;font-weight: 500;color: #ffffff;
}</style>

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

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

相关文章

操作系统学习笔记--进程与线程

进程 概念 不同的角度有不同的定义 进程是程序的一次执行过程进程是一个程序及其数据在处理机上顺序执行时所发生的活动进程是具有独立功能的程序在一个数据集合上运行的过程&#xff0c;它是系统进行资源分配和调度的一个独立单位 进程&#xff1a;是动态的&#xff0c;是…

ESP-07S进行TCP 通信测试

一&#xff0c;TCP Server 为 AP 模式&#xff0c;TCP Client 为 Station 模式。 这里电脑pc作为TCP Server&#xff0c;ESP-07S作为TCP Client 。 二&#xff0c;电脑端配置。 1&#xff0c;开启热点。 2&#xff0c;转到“设置”&#xff0c;编辑热点信息。 3&#xff0c;关闭…

nio 文件传输

transferto方法一次只能传输2个g的数据 文件大于2个g时

动态壁纸软件iWall mac中文特色

iWall for mac是一款动态壁纸软件&#xff0c;它可以使用任何格式的漂亮视频(无须转换)&#xff0c;音频(可视化功能)&#xff0c;图片&#xff0c;动画&#xff0c;Flash&#xff0c;gif&#xff0c;swf&#xff0c;程序&#xff0c;网页&#xff0c;网站做为您的动态壁纸&…

90后整顿秦始皇老板

我的日常就像跑步机上急速前行的仓鼠&#xff0c;使劲往前冲&#xff0c;心有余力力有限。 我在一个电商运营公司做策划和写文案&#xff0c;每天总是加不完的班&#xff0c;从来没见过下午六点钟的太阳。 我做文案吗&#xff1f;唉&#xff0c;说实话&#xff0c;我倒觉得大…

HP打印机一点击打印就出现Windows资源管理器已停止工作问题解决

本次处理的打印机型号是HP Officejet 200 移动便携式打印机&#xff0c;不过其他型号如果出现类似现象&#xff0c;解决方法应该是一致的。 在弹出Windows资源管理器已停止工作的报错提示框后&#xff0c;点击左下角的详细信息&#xff0c;看到的内容显示是KernelBase.dll崩溃…

第二证券:汽车产业链股活跃,恒勃股份、博俊科技“20cm”涨停

轿车产业链股9日盘中走势活跃&#xff0c;截至发稿&#xff0c;恒勃股份、博俊科技“20cm”涨停&#xff0c;德迈仕涨超17%&#xff0c;上声电子涨超14%&#xff0c;川环科技涨超10%&#xff0c;圣龙股份、科华控股、沪光股份、上海沿浦、日盈电子、赛力斯等均涨停。 工作方面…

Feign(替代RestTemplate)远程调用

Feign初步学习 定义 Feign 是一个基于 Java 的 HTTP 客户端库&#xff0c;它是 Spring Cloud 中的一部分&#xff0c;用于简化微服务之间的 HTTP 通信。与传统的使用 RestTemplate 来调用 RESTful 服务不同&#xff0c;Feign 提供了一种声明式、基于接口的方式来定义和调用 H…

XLSX.utils.sheet_to_json()解析excel,给空的单元格赋值为空字符串

前言 今天用到XLSX来解析excel文件&#xff0c;调用XLSX.utils.sheet_to_json(worksheet)&#xff0c;发现如果单元格为空的话&#xff0c;解析出来的结果&#xff0c;就会缺少相应的key&#xff08;如图所示&#xff09;。但是我想要单元格为空的话&#xff0c;值就默认给空字…

HarmonyOS/OpenHarmony原生应用开发-华为Serverless认证服务说明(二)

一、支持HarmonyOS(Stage模型-API9)应用的账户注册登录方式 文档中的TS作者认为就是ArkTS之意。暂时支持四种模式&#xff0c;手机、邮箱、匿名、自有账户。 二、暂时不支持HarmonyOS(Stage模型-API9)应用的账户注册登录方式 包括华为账户注册登录&#xff0c;HarmonyOS…

计算机竞赛 题目:基于深度学习的手势识别实现

文章目录 1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估 6 识别效果7 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的手势识别实现 该项目较为新颖&#xff0c;适合作为竞赛课题…

汽车烟雾测漏仪(EP120)

【汽车烟雾测漏仪&#xff08;EP120&#xff09;】 此烟雾测漏仪专为车辆管道&#xff08;油道、气道、冷却管道&#xff09; 的泄露检测而设计。适用于所有轻型 汽车、摩托车、轻卡、游艇等。 【特点】 具有空气模式和烟雾模式。空气模式&#xff0c;无需烟雾&#xff0c;检测…

接口自动化测试yaml+requests+allure技术,你学会了吗?

前言 接口自动化测试是在软件开发过程中常用的一种测试方式&#xff0c;通过对接口进行自动化测试&#xff0c;可以提高测试效率、降低测试成本。在接口自动化测试中&#xff0c;yaml、requests和allure三种技术经常被使用。 一、什么是接口自动化测试 接口自动化测试是指通…

vue实现自定义滚动条

vue实现自定义滚动条 具体效果如下&#xff0c;这边我用的rem单位&#xff0c;比例是1:40&#xff0c; 先写下页面布局&#xff0c;把原生的滚动条给隐藏掉&#xff0c;给自定义的滑块增加transition: marginLeft 1s linear;可以使左边距过度的更顺滑 .top-box-2::-webkit-scr…

【DRAM存储器十三】DDR介绍

&#x1f449;个人主页&#xff1a;highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 参考资料&#xff1a;《镁光DDR数据手册》 目录 DDR SDRAM芯片引脚 DDR SDRAM芯片框…

销售小白如何写客户拜访记录?

销售小白如何写客户拜访记录&#xff1f;10年客户管理经验&#xff0c;接下来我说的&#xff0c;都是实实在在的经验&#xff0c;小白能用到其中的40%&#xff0c;你的客户成单率会大大提升&#xff01; 首先&#xff0c;客户拜访记录的哪些信息是重要的&#xff1f; 答案是&…

ueditor

下载文件 文档 UEditor入门部署 入门部署和体验 1.1 下载编辑器 到官网下载 UEditor 最新版&#xff1a;http://ueditor.baidu.com/website/download.html#ueditor 1.2 创建demo文件 解压下载的包&#xff0c;在解压后的目录创建 demo.html 文件&#xff0c;填入下面的…

【轻松玩转MacOS】网络连接篇

引言 本篇让我们来聊聊网络连接。不论你是在家、在办公室&#xff0c;还是咖啡厅、机场&#xff0c;几乎所有的MacOS用户都需要连接到互联网。在这个部分&#xff0c;我们将向你展示如何连接到互联网和局域网。让我们开始吧&#xff01; 一、连接到互联网 首先&#xff0c;我…

CSS 中::after的妙用(实现在margin中显示内容)

效果图如下&#xff1a; 背景&#xff1a; 如上图&#xff0c;之前只是当纯的写一个参考货架平面图&#xff0c;用作物料系统的在库状态可视化&#xff0c;当完成页面body分成10等份时&#xff0c;货架之间需要有通道&#xff0c;为了实现实际的样式&#xff0c;我给每个等份都…

SpringBoot集成WebSocket讲解

文章目录 1 WebSocket1.1 简介1.2 WebSocket作用和调用1.2.1 作用1.2.2 js端调用 1.3 Javax1.3.1 服务端1.3.1.1 服务端接收1.3.1.2 服务端集成1.3.1.3 ping和pong消息 1.3.2 客户端1.3.2.1 客户端接收1.3.2.2 客户端发送 1.4 WebMVC1.4.1 服务端1.1.4.1 服务端接收1.1.4.2 服务…