当前位置： 首页 > news >正文

CSS_实现三角形和聊天气泡框

news 2026/1/25 9:39:31

如何用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、第一步 写一个正常的盒子模型&#xff0c;先给个正方形的div&#xff0c;便于观察&#xff0c;给div设置宽高和背景颜色 <body><div class"box"></div> </body> <style>.box {width: 100px;height: 100px…...

编程日记 2024/2/29 9:13:30

VPX基于全国产飞腾FT-2000+/64核+复旦微FPGA的计算刀片

6U VPX计算板 产品简介 产品特点 飞腾计算平台&#xff0c;国产化率100% VPX-MPU6902是一款基于飞腾FT-2000/64核的计算刀片&#xff0c;主频2.2GHz&#xff0c;负责业务数据流的管控和调度。搭配自带独立显示芯片的飞腾X100芯片&#xff0c;可用于于各类终端及服务器类应用场…...

编程日记 2024/2/29 9:12:29

ifcplusplus 示例 函数中英文 对照分析

有需求&#xff0c;需要分析 ifc c渲染&#xff0c;分析完&#xff0c;有 230个函数&#xff0c;才能完成一个加载&#xff0c;3d加载真的是大工程&#xff01; 函数中英文对照表&#xff0c;方便 日后开发&#xff0c;整理思路顺畅&#xff01;&#xff01;&#xff01;&#…...

编程日记 2024/2/29 9:11:28

天一个数据分析题（一百七十三）

聚类算法的主要应用场景是用户分群&#xff0c;聚类是一种无监督方法&#xff0c;以下哪个不是衡量聚类效果好坏的评估方法&#xff08;&#xff09;。 A. 轮廓系数 B. 平方根标准误差 C. ARI(调整的兰德系数) D. 相关系数 题目来源于CDA模拟题库 点击此处获取答案...

编程日记 2024/2/29 9:10:26

尚硅谷(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…...

编程日记 2024/2/29 9:03:15

arm服务器上部署kibana

1.首先需要从elasticsearch对应的kibana版本(arm) ​​​​​​Download Kibana Free | Get Started Now | Elastic 注意:选平台时切勿选错,linux aarch64,并选择elasticsearch对应的历史版本 2.可以通过rz命令上传压缩包至 linux 服务器进行解压&#xff0c;存放路径建议和e…...

编程日记 2024/2/29 8:58:11

Redis之二：Redis 常用命令

Redis 命名不区分大小写 0.登录远程服务器 如果需要在远程 redis 服务上执行命令&#xff0c;同样我们使用的也是 redis-cli 命令。 语法 $ redis-cli -h host -p port -a password 获取配置信息&#xff1a; CONFIG GET CONFIG_SETTING_NAME 例&#xff1a; CONFIG GE…...

编程日记 2024/2/29 8:55:08

npm 镜像源切换与设置

项目背景 依赖安装中断或响应特别慢。 可以看到当前所用的镜像是 https://registry.npmjs.org 。 切换淘宝镜像之后总算能够安装下来 命令行模式 查看当前镜像源 # 查看当前镜像源 npm config get registry 可以看到默认情况下是官方默认全局镜像 https://registry.npmjs.o…...

编程日记 2024/2/29 8:54:07

【HDFS】Decommision（退役） EC数据节点剩最后几个块卡住的问题

一、背景 近期操作退役EC集群的节点。在退役的过程中，遇到了一些问题。特此总结一下。 本文描述的问题现象是： 每一批次退役10个节点，完全退役成功后开始操作下一批。 但是，中间有一批次有2台节点的Under Replicated Blocks一直是1，不往下降。 处于Decommissioning状态卡…...

编程日记 2024/2/29 8:53:07

MySQL知识点归纳总结（一）

1、事务的四大特性&#xff1f; 事务特性ACID&#xff1a;原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;、持久性 &#xff08;Durability&#xff09;。 原子性是指事务包含的所有操作要么…...

编程日记 2024/2/29 8:52:06

SocketWeb实现小小聊天室

SocketWeb实现小小聊天室 消息推送的常见方式轮询长轮询SSE&#xff08;server-sent event&#xff09;&#xff1a;服务器发送事件WebSocketWebSocket简介WebSocket API 实现小小聊天室实现流程消息格式客户端-->服务端服务端-->客户端 消息推送的常见方式 轮询 浏览器…...

编程日记 2024/2/29 8:51:05

如何在启用Secure Boot的Ubuntu 22.04电脑中安装使用VirtualBox 6.1

我使用的是华为Matebook X Pro笔记本电脑&#xff0c;默认开启了UEFI安全引导&#xff08;UEFI Secure Boot&#xff09;&#xff0c;安装了Windows和Ubuntu双操作系统&#xff0c;平时基本上都是使用Ubuntu 22.04&#xff08;Linux Mint 21.3&#xff09;&#xff0c;使用上也…...

编程日记 2024/2/29 8:50:04

基于B/S+MySQL+Tomcat开发的旅游信息管理系统

基于B/SMySQLTomcat开发的旅游信息管理系统 项目介绍&#x1f481;&#x1f3fb; 塞北村镇旅游网站设计主要用于实现旅游景点信息管理&#xff0c;基本功能包括&#xff1a;主界面模块设计&#xff0c;用户注册模块&#xff0c;旅游景点模块&#xff0c;酒店预订模块&#xff0…...

编程日记 2024/2/29 8:49:03

mac m3安装nvm安装说明；mac安装xbrew

安装说明说明&#xff1a; 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 配置文件内添加内…...

编程日记 2024/2/29 8:43:59

【小沐学QT】QT学习之Web控件的使用

文章目录 1、简介1.1 Qt简介1.2 Qt下载和安装1.3 Qt快捷键1.4 Qt帮助 2、QtWeb控件2.1 测试代码1&#xff08;QApplication&#xff09;2.2 测试代码2&#xff08;QApplicationQWidget&#xff09;2.3 测试代码3&#xff08;QApplicationQMainWindow&#xff09;2.4 测试代码4&…...

编程日记 2024/2/29 8:42:58

word embedding

介绍&#xff1a; ASCII可以编码为计算机可以识别的数据&#xff0c;为什么还需要embedding? 计算机只是对“字母”进行ASCII编码&#xff0c;并没有对词汇的“Word”编码。词汇应该是咱们处理自然语言的最基本的元素&#xff0c;而不是字母。那么世界上有千千万万的Word&am…...

编程日记 2024/2/29 8:34:51

原码，反码，补码

原码 什么是原码 原码&#xff1a;十进制数据的二进制表现形式&#xff0c;最左边是符号位&#xff0c;0为正&#xff0c;1为负 最大值 0 1 1 1 1 1 1 1 > 127 最小值 1 1 1 1 1 1 1 1 > -127 原码的弊端 利用原码对正数进行计算是不会有问题的 但是如果是负数计算…...

编程日记 2024/2/29 8:33:50

科技赋能，MTW400A为农村饮水安全打通“最后一公里”

日前&#xff0c;山东省政府纵深推进国家省级水网先导区建设&#xff0c;持续深化“水网”行动&#xff0c;着力构筑水安全保障网、水民生服务网、水生态保护网&#xff0c;建设水美乡村示范带、内河航运示范带、文旅融合示范带、绿色发展示范带&#xff0c;推动形成“三网四带…...

编程日记 2024/2/29 8:32:49

测试计划、测试方案、测试策略、测试用例的区别

一 测试计划 测试计划是指描述了要进行的测试活动的范围、方法、资源和进度的文档。它主要包括测试项、被测特性、各阶段的测试任务、时间进度安排&#xff0c;谁执行任务和风险控制等&#xff0c;可以包括测试策略。 二 测试方案 测试方案是指描述需要测试的特性、测试的方…...

编程日记 2024/2/29 8:31:49

c# 异常处理

异常类 .NET Framework 类库中的所有异常都派生于 Exception 类&#xff0c;异常包括系统异常和应用异常。 默认所有系统异常派生于 System.SystemException&#xff0c;所有的应用程序异常派生于 System.ApplicationException。 系统异常一般不可预测&#xff0c;比如内存堆…...

编程日记 2024/2/29 8:30:47

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/1/22 17:39:11

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/1/15 5:04:15

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/15 6:20:36

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/1/23 11:38:37

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2026/1/24 19:10:17