CSS_实现三角形和聊天气泡框
如何用css画出一个三角形
1、第一步
写一个正常的盒子模型，先给个正方形的div，便于观察，给div设置宽高和背景颜色
<body><div class="box"></div>
</body>
<style>.box {width: 100px;height: 100px;background-color: pink;}
</style>
2、第二步
便于观察，给div设置四个不同颜色的的边框border
<style>.box {width: 100px;height: 100px;background-color: pink;border-left: 50px solid skyblue;border-right: 50px solid yellow;border-bottom: 50px solid yellowgreen;border-top: 50px solid violet;}
</style>
四种不同颜色的边框，已经可以看出来，四个边框差个尖尖就是三角形
3、第三步
把中间的div的宽高设置为0像素，即可得到四个等腰三角形
<style>.box {width: 0px;height: 0px;background-color: pink;border-left: 50px solid skyblue;border-right: 50px solid yellow;border-bottom: 50px solid yellowgreen;border-top: 50px solid violet;}
</style>
4、第四步
我们需要哪一边的三角形，把另外三边的边框设置透明transparent即可
比如我现在需要上面的三角形，我就可以把左右下的边框设置透明,并且把div的背景色删掉或者注释掉
<style>.box {width: 0px;height: 0px;/* background-color: pink; */border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;border-top: 50px solid violet;}
</style>
聊天气泡实现
<body><div class="box"></div>
</body>
<style>.box {width: 200px;height: 100px;/*父级给相对定位，伪元素根据父级给绝对定位 */position: relative;background-color: violet;border-radius: 20px;}.box::after {content: '';width: 0px;height: 0px;border: 20px solid;border-left: 20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid transparent;border-top: 20px solid violet;/*给绝对定位，根据需求设置三角形的位置*/position: absolute;top: 100px;left: 50px;}
</style>
简单代码实现
<div class="wrapper"></div>
<style>.wrapper {position: relative;width: 200px;height: 200px;margin: 50px auto;border-radius: 12px;background: #ffffff;filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));padding: 20px;}.wrapper:before {content: "";position: absolute;width: 0;height: 0;border: 10px solid transparent;border-bottom-color: #ffffff;top: -20px;left: 50px;}
</style>
相关文章：
CSS_实现三角形和聊天气泡框
如何用css画出一个三角形 1、第一步 写一个正常的盒子模型，先给个正方形的div，便于观察，给div设置宽高和背景颜色 <body><div class"box"></div> </body> <style>.box {width: 100px;height: 100px…...
VPX基于全国产飞腾FT-2000+/64核+复旦微FPGA的计算刀片
6U VPX计算板 产品简介 产品特点 飞腾计算平台，国产化率100% VPX-MPU6902是一款基于飞腾FT-2000/64核的计算刀片，主频2.2GHz，负责业务数据流的管控和调度。搭配自带独立显示芯片的飞腾X100芯片，可用于于各类终端及服务器类应用场…...
ifcplusplus 示例 函数中英文 对照分析
有需求，需要分析 ifc c渲染，分析完，有 230个函数，才能完成一个加载，3d加载真的是大工程！ 函数中英文对照表，方便 日后开发，整理思路顺畅！！！&#…...
天一个数据分析题（一百七十三）
聚类算法的主要应用场景是用户分群，聚类是一种无监督方法，以下哪个不是衡量聚类效果好坏的评估方法（）。 A. 轮廓系数 B. 平方根标准误差 C. ARI(调整的兰德系数) D. 相关系数 题目来源于CDA模拟题库 点击此处获取答案...
尚硅谷(SpringCloudAlibaba微服务分布式）学习代码Eureka部分
1.项目结构 2.cloud2024 pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.a…...
arm服务器上部署kibana
1.首先需要从elasticsearch对应的kibana版本(arm) Download Kibana Free | Get Started Now | Elastic 注意:选平台时切勿选错,linux aarch64,并选择elasticsearch对应的历史版本 2.可以通过rz命令上传压缩包至 linux 服务器进行解压，存放路径建议和e…...
Redis之二：Redis 常用命令
Redis 命名不区分大小写 0.登录远程服务器 如果需要在远程 redis 服务上执行命令，同样我们使用的也是 redis-cli 命令。 语法 $ redis-cli -h host -p port -a password 获取配置信息： CONFIG GET CONFIG_SETTING_NAME 例： CONFIG GE…...
npm 镜像源切换与设置
项目背景 依赖安装中断或响应特别慢。 可以看到当前所用的镜像是 https://registry.npmjs.org 。 切换淘宝镜像之后总算能够安装下来 命令行模式 查看当前镜像源 # 查看当前镜像源 npm config get registry 可以看到默认情况下是官方默认全局镜像 https://registry.npmjs.o…...
【HDFS】Decommision（退役） EC数据节点剩最后几个块卡住的问题
一、背景 近期操作退役EC集群的节点。在退役的过程中，遇到了一些问题。特此总结一下。 本文描述的问题现象是： 每一批次退役10个节点，完全退役成功后开始操作下一批。 但是，中间有一批次有2台节点的Under Replicated Blocks一直是1，不往下降。 处于Decommissioning状态卡…...
MySQL知识点归纳总结（一）
1、事务的四大特性？ 事务特性ACID：原子性（Atomicity）、一致性（Consistency）、隔离性（Isolation）、持久性 （Durability）。 原子性是指事务包含的所有操作要么…...
SocketWeb实现小小聊天室
SocketWeb实现小小聊天室 消息推送的常见方式轮询长轮询SSE（server-sent event）：服务器发送事件WebSocketWebSocket简介WebSocket API 实现小小聊天室实现流程消息格式客户端-->服务端服务端-->客户端 消息推送的常见方式 轮询 浏览器…...
如何在启用Secure Boot的Ubuntu 22.04电脑中安装使用VirtualBox 6.1
我使用的是华为Matebook X Pro笔记本电脑，默认开启了UEFI安全引导（UEFI Secure Boot），安装了Windows和Ubuntu双操作系统，平时基本上都是使用Ubuntu 22.04（Linux Mint 21.3），使用上也…...
基于B/S+MySQL+Tomcat开发的旅游信息管理系统
基于B/SMySQLTomcat开发的旅游信息管理系统 项目介绍💁🏻 塞北村镇旅游网站设计主要用于实现旅游景点信息管理，基本功能包括：主界面模块设计，用户注册模块，旅游景点模块，酒店预订模块࿰…...
mac m3安装nvm安装说明；mac安装xbrew
安装说明说明： 1.安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"2.安装nvm brew install nvm3.创建.nvm目录 mkdir ~/.nvm4.编辑 ~/.zshrc 配置文件 vi ~/.zshrc5.在 ~/.zshrc 配置文件内添加内…...
【小沐学QT】QT学习之Web控件的使用
文章目录 1、简介1.1 Qt简介1.2 Qt下载和安装1.3 Qt快捷键1.4 Qt帮助 2、QtWeb控件2.1 测试代码1（QApplication）2.2 测试代码2（QApplicationQWidget）2.3 测试代码3（QApplicationQMainWindow）2.4 测试代码4&…...
word embedding
介绍： ASCII可以编码为计算机可以识别的数据，为什么还需要embedding? 计算机只是对“字母”进行ASCII编码，并没有对词汇的“Word”编码。词汇应该是咱们处理自然语言的最基本的元素，而不是字母。那么世界上有千千万万的Word&am…...
原码，反码，补码
原码 什么是原码 原码：十进制数据的二进制表现形式，最左边是符号位，0为正，1为负 最大值 0 1 1 1 1 1 1 1 > 127 最小值 1 1 1 1 1 1 1 1 > -127 原码的弊端 利用原码对正数进行计算是不会有问题的 但是如果是负数计算…...
科技赋能，MTW400A为农村饮水安全打通“最后一公里”
日前，山东省政府纵深推进国家省级水网先导区建设，持续深化“水网”行动，着力构筑水安全保障网、水民生服务网、水生态保护网，建设水美乡村示范带、内河航运示范带、文旅融合示范带、绿色发展示范带，推动形成“三网四带…...
测试计划、测试方案、测试策略、测试用例的区别
一 测试计划 测试计划是指描述了要进行的测试活动的范围、方法、资源和进度的文档。它主要包括测试项、被测特性、各阶段的测试任务、时间进度安排，谁执行任务和风险控制等，可以包括测试策略。 二 测试方案 测试方案是指描述需要测试的特性、测试的方…...
c# 异常处理
异常类 .NET Framework 类库中的所有异常都派生于 Exception 类，异常包括系统异常和应用异常。 默认所有系统异常派生于 System.SystemException，所有的应用程序异常派生于 System.ApplicationException。 系统异常一般不可预测，比如内存堆…...
Photoshop图层批量导出终极指南：告别手动保存，效率提升300%
Photoshop图层批量导出终极指南：告别手动保存，效率提升300% 【免费下载链接】Photoshop-Export-Layers-to-Files-Fast This script allows you to export your layers as individual files at a speed much faster than the built-in script from Adobe.…...
QMCDecode终极指南：3分钟解锁QQ音乐加密文件，实现音乐自由
QMCDecode终极指南：3分钟解锁QQ音乐加密文件，实现音乐自由 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac，qmc0,qmc3转mp3, mflac,mflac0等转flac)，仅支持macOS，可自动识别到QQ音乐下载目录&a…...
避坑指南：开启Linux Framebuffer Console后系统卡住？排查LCD驱动里的这两个关键点
Linux Framebuffer Console卡死？深入解析LCD驱动中的两个致命陷阱 当你在嵌入式项目中为LCD屏配置Framebuffer Console时，是否遇到过内核启动卡在"starting kernel..."后毫无反应的窘境？这种看似简单的显示功能背后，隐藏…...
告别数据线？实测用手机Termux+网络串口给ESP32无线OTA升级
手机Termux网络串口实现ESP32无线OTA升级全攻略 想象一下这样的场景：你正坐在咖啡馆里，突然灵感迸发想修改ESP32设备的固件。传统方式需要翻出数据线、连接电脑、打开开发环境...但现在，只需掏出手机就能完成从代码修改到固件烧录的全流程。这…...
SPI-LIN桥接器在汽车电子中的设计与应用
1. SPI-LIN桥接器的设计背景与核心价值在汽车电子系统中，通信协议的选型往往需要在性能和成本之间寻找平衡点。LIN总线作为CAN总线的经济型替代方案，其最大优势在于实现成本仅为CAN模块的1/5。典型LIN节点的BOM成本可控制在$0.5以下，这使得它…...
[Android] 随心听书 v2.0.6
[Android] 随心听书 v2.0.6 链接：https://pan.xunlei.com/s/VOqUlfasc_gdgBBND-3CEQygA1?pwds8b5# 随心听书是一款离线听书应用，让用户可以随时随地享受阅读的乐趣。无需网络连接，即可畅听有声书籍，无论是上下班途中还是休息时…...
AGI治理倒计时：2026奇点大会披露的3类高危失控场景及5步防御协议
第一章：2026奇点智能技术大会：AGI的治理框架 2026奇点智能技术大会(https://ml-summit.org) 全球首个AGI治理协同体启动 大会正式发布《AGI治理协同体宪章（2026草案）》，确立“能力-意图-影响”三维评估模型ÿ…...
STM32F407的USART DMA+空闲中断接收HC-05数据，这样写代码更稳定（附手机蓝牙助手通信协议解析）
STM32F407的USART DMA空闲中断接收HC-05数据，这样写代码更稳定（附手机蓝牙助手通信协议解析） 在物联网设备开发中，蓝牙通信的稳定性和效率往往是决定产品体验的关键因素。许多开发者在使用STM32F407与HC-05蓝牙模块进行通信时&…...
别再只会用Pandas的to_csv了！这5个参数（encoding, sep, mode, float_format, columns）才是数据导出的精髓
解锁Pandas数据导出的隐藏技能：5个高阶参数实战指南 每次看到同事用Pandas导出数据时直接df.to_csv(data.csv)，我都忍不住想提醒——这就像开着跑车却只用一档行驶。真正懂行的数据分析师都知道，to_csv()的威力藏在那些不起眼的参数里。今天我…...
别再重启了！Surface Pro蓝牙失灵，试试这个PowerShell命令（Win10/Win11通用）
Surface Pro蓝牙失灵急救指南：5条PowerShell命令快速恢复连接 每次打开Surface Pro发现蓝牙图标神秘消失时，那种焦躁感我深有体会。作为常年携带Surface Pro出差的设计师，我经历过太多次演示前鼠标突然断连的尴尬。经过两年反复试验ÿ…...