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。 系统异常一般不可预测，比如内存堆…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...
在 Spring Boot 项目里，MYSQL中json类型字段使用
前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...
ubuntu22.04有线网络无法连接，图标也没了
今天突然无法有线网络无法连接任何设备，并且图标都没了 错误案例 往上一顿搜索，试了很多博客都不行，比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动，重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西，但是如果把三者放在一起，它们之间到底什么关系？又有什么联系呢？我不是很明白！！！ 就比如说： 沙箱&#…...
WebRTC调研
WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...
基于Uniapp的HarmonyOS 5.0体育应用开发攻略
一、技术架构设计 1.混合开发框架选型 （1）使用Uniapp 3.8版本支持ArkTS编译 （2）通过uni-harmony插件调用原生能力 （3）分层架构设计： graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...
spring boot使用HttpServletResponse实现sse后端流式输出消息
1.以前只是看过SSE的相关文章，没有具体实践，这次接入AI大模型使用到了流式输出，涉及到给前端流式返回，所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...