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。 系统异常一般不可预测，比如内存堆…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
大语言模型如何处理长文本？常用文本分割技术详解
为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
探索Selenium：自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
Leetcode33（ 搜索旋转排序数组）
题目表述 整数数组 nums 按升序排列，数组中的值 互不相同 。 在传递给函数之前，nums 在预先未知的某个下标 k（0 < k < nums.length）上进行了 旋转，使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析
Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么？它的作用是什么？ Spring框架的核心容器是IoC（控制反转）容器。它的主要作用是管理对…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...