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。 系统异常一般不可预测，比如内存堆…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法，当前调用一个医疗行业的AI识别算法后返回…...
AspectJ 在 Android 中的完整使用指南
一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
基于 TAPD 进行项目管理
起因 自己写了个小工具，仓库用的Github。之前在用markdown进行需求管理，现在随着功能的增加，感觉有点难以管理了，所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD，需要提供一个企业名新建一个项目&#…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...