程序员经验分享-hwhale

纯css画三角形及气泡样式的简单画法

2023-11-19
  • 在做项目的过程中，遇到了要写一个气泡的样式，先布局了矩形部分，但小三角形的旗气泡遇到一点困难。后来梳理了一下，以此记录。
  • 首先是三角形的画法：三角形的原理就是矩形，然后分成四个三角形，一般使用border来画一个三角形，如下图所示，我们给一个形状设置border属性时，一般是一下这种样式，如果我们不要里面的矩形，也就是里面的部分width和height都设置为0，那么只剩下border的宽度，形成图2这种形式
    图1
    图2：
    在这里插入图片描述
  • 四个border可以形成一个矩形，然后就可以根据设置不同的border画出我们想要的三角形了。通过给三角形设置不同的位置，就可以画出我们想要的气泡，画一个具体的气泡形式的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css画三角形</title>
    <style type="text/css">
        .popover{
            position: relative;
            width: 100%;
            height: 800px;
        }

        .div{
            position: absolute;
            left: 30px;
            top: 30px;
            width: 200px;
            height: 100px;
            background-color: white;
            border: 1px solid rgb(240,240,240);
            box-shadow: 0px 0px 5px 5px rgb(235, 235, 235);
                        /*-5px -5px 5px rgb(230, 230, 230);*/
            border-radius: 5px;
            box-sizing: border-box;
            
        }

        .triangle-left{
            position: absolute;
            top: 40px;
            left: -19px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid white;
        }
        .triangle-right{
            position: absolute;
            top: 40px;
            right: -19px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid white;
            border-right: 10px solid transparent;
        }
        .triangle-bottom{
            position: absolute;
            top: 100%;
            left: calc(50% - 19px);
            width: 0;
            height: 0;
            border-top: 10px solid white;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
        .triangle-top{
            position: absolute;
            top: 100%;
            left: calc(50% - 19px);
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid white;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div class="popover">
      <!-- <div class="div">
        三角形朝左
        <div class="triangle-left"></div> 
        </div>
       <div class="div">
        三角形朝右
        <div class="triangle-right"></div> 
        </div>
       <div class="div">
        三角形朝上
        <div class="triangle-top"></div> 
        </div>  -->
        <div class="div">
        三角形朝下
        <div class="triangle-bottom"></div> 
        </div>
    </div>
    
    
</body>
</html>

气泡朝下的形式如图所示：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

CSS3

纯css画三角形及气泡样式的简单画法 的相关文章

  • Chrome：网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上

  • 外部 css 文件在 Flask 框架中不起作用

    我正在尝试在我的 html 文件中使用外部 css 文件 起初我使用 bootstrap 框架 效果很好 然而 当我尝试通过添加自定义的css文件来自定义网页时 它根本不起作用 这是我的代码

  • 如何使用 PHP 动态插入 CSS 类？

    下面的代码有什么问题 我想在相应的情况下动态插入 当前 CSS 类 li 单击元素 谢谢 section section li

  • 使用 jQuery 更改 CSS 类属性

    有没有办法使用 jQuery 更改 CSS 类的属性 而不是元素属性 这是一个实际的例子 我有一个 div 类red red background red 我想转班级red背景属性 而不是具有类的元素red分配的背景 如果我用 jQuery

  • 无限水平滚动图像循环？

    所以我试图在我的网站上创建一个无限滚动动画 但我一直在努力 原始教程在这里 使用 6 张图像 最后重复 4 张图像以实现无缝过渡 https designshack net articles css infinitephotobanner

  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m

  • 在Android中将半径边框绘制到imageview或textview的一个角落

    我需要在我的应用程序中为图像视图或文本视图绘制边框 但我只需要在一个角落绘制它 就像图像一样 我做了一个形状 但我在所有 4 个边上都有边框

  • 垂直对齐多行文本（菜单元素）？

    我正在尝试垂直对齐 UL 内的文本 问题是某些列表项具有不止一行文本 因此无法使用行高 小提琴 http jsfiddle net jaAYT http jsfiddle net jaAYT 这是我想要达到的结果 http img402 i

  • 在具有子项的“contenteditable”div 中设置插入符位置

    我有一个这样的 HTML 结构 div This is some plain boring content div 我还有这个函数 允许我将插入符位置设置到 div 中我想要的任何位置 Move caret to a specific po

  • 使用 html 敏捷包解析 html

    我想从这个 div 中收集所有标签 但不知道如何使用 xpath 方法以最佳方式做到这一点 div class biz info h3 a href profil 78122 s C3 B8rby rehab S rby Rehab a h

  • Bootstrap 标签栏平滑移动导航按钮

    我有一个用于切换块的普通引导选项卡面板 在导航中切换块时 活动选项卡会突出显示 但现在 当我单击活动选项卡的背景时 它会立即发生变化 是否可以使切换选项卡时背景不会立即改变 而是根据需要哪个选项卡而平滑地左右移动 这可以用以下方法完成吗cs

  • Rails、REST 架构和 HTML 5：带有预检请求的跨域请求

    在致力于使我们的网站 HTML 5 友好的项目时 我们渴望采用跨域请求的新方法 不再通过隐藏的 iframe 发布 使用访问控制 http www w3 org TR access control 根据规范 我们开始设置一些测试来验证各种浏

  • 尝试从网页Python和BeautifulSoup获取编码

    我试图从网页检索字符集 这会一直改变 目前我使用 beautifulSoup 来解析页面 然后从标题中提取字符集 这工作正常 直到我遇到一个网站 到目前为止 我的代码以及与其他页面一起使用的代码是 def get encoding soup

  • 使用 Flot、html、PHP 和 MySql 查询绘制多个图表

    我正在尝试使用 Flot html PHP 和 MySql 查询绘制多个图表 但我陷入了困境 因为我找不到在同一个 html 页面中绘制多个 flot 的方法 为简单起见 在数据库 test db3 映像中包含以下字段 表1 用户名 发送邮

  • 在 Chrome 中为

    我已经看到这个问题多次出现 但没有任何明确的解决方案 我正在加载一个简单的视频

  • 哪些 HTML 元素不能包含子节点？

    我一直在寻找一份详尽的清单 但在任何地方都找不到 为了避免必须仔细阅读规范 有谁知道它们是什么 我认为可以包含子元素的补充元素列表也很有用 XHTML 1 和 HTML5 之间的列表有何不同 您可以在以下位置找到 void 元素 不能有任何

  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi

  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh

  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog

  • 选择单选按钮时隐藏/显示 3 个文本框

    我有 2 个单选按钮 选择一个文本框时 我想显示 3 个文本框 并在选择其他文本框时隐藏它 这是代码 这是我的 2 个单选按钮

随机推荐

  • BIO、NIO、AIO理解

    一 到底什么是BIO NIO AIO 这些可以理解为是Java语言对操作系统的各种IO模型的封装 程序员在使用这些API的时候 不需要关系操作系统层面的知识 也不需要根据不同操作系统编写不同的代码 只需要使用Java的API就可以了 二 B

  • Eclipse搭建stm32+jlink开发环境全攻略(进阶篇一)

    Eclipse搭建stm32 jlink开发环境全攻略 进阶篇 一 本篇开始讲解一些比较实用的东西 在前面的两章中 我们讲解了eclipse开发stm32的大部分问题 然而 在实际使用过程中 我们仍然会遇到一些不太理想的地方 比如 ecli

  • Leetcode力扣题解 - 30.串联所有单词的子串

    地址 30 串联所有单词的子串 力扣 LeetCode 一 思路 本题关键点是 1 所有关键词长度一致 2 匹配的是所有关键词连接起来的 大体思路 那么我们就可以从字符串头开始 每次只匹配关键词总长度个字符 如果匹配成功 在返回的数组中保存

  • HDMI中的视频时序分析

    一 前言 建立层次观念 说到时序 我们首先想到的例子是IIC SPI 串口等接口的例子 以我们之前的理解 时序就是传输线上电平随时间变化的顺序 但是但是但是 在HDMI这里 我们应该建立一个新的观念 即时序不一定对应到物理层 即传输线上 这

  • python--- end=“ , 单独的一行print()是什么意思

    有如下一道练习题 编写代码打印出下列图形 代码如下 for i in range 4 for j in range 5 print end print 其中end 意思是为末尾end传递一个空字符串 这样print函数不会在字符串末尾添加一

  • 工频干扰频谱测量_【鼎阳硬件智库译文

    英文原文 by Mratin Miller 汪进进 译 鼎阳硬件设计与测试智库发起人之一 简介 多通道串行数据链路容易受到串扰的影响 这些串扰可能来自于相邻通道 也可能是外部的干扰源 Aggressor 其结果是增加了受干扰通道 Victi

  • leetcode数组刷题总结与分析

    文章目录 小结 数组中元素的计算 子序列 任意元素 题目一 两数之和 题目15 三数的和 17 四数之和 16 最接近三数之和 167 两数之和 输入有序数组 560 和为k的子数组 523 连续的子数组的和 53 最大子数组和 713 乘

  • Shell脚本到底是什么高大上的技术吗？

    本文介绍shell脚本知识 学习前最好有linux命令知识储备 一篇文章看完 下次找工作时简历上请写上会shell脚本 栓Q shell脚本是什么 shell脚本就是一个包含shell命令的脚本 常说的linux命令 也可以认为是shell

  • ArrayList与顺序表

    目录 编辑 一 线性表 二 顺序表 1 接口的实现 1 打印顺序表 2 新增元素 3 判定是否包含某个元素 4 查找某个元素对应的位置下标 5 获取 pos 位置的元素 6 获取顺序表长度 7 给 pos 位置的元素设为 value 更新的

  • C++ 一些学习笔记（三） 内存区域

    C 一些学习笔记 三 内存区域 主要是针对之前学习C的时候一些知识点的遗漏的补充 还有一些我自己觉得比较重要的地方 本文章的主要内容是关于程序内存模型的 内存的分区模型 1 程序运行前 2 程序运行后 3 new操作符 主要是针对之前学习C

  • 华为OD机试 - 路灯照明问题（Java)

    题目描述 在一条笔直的公路上安装了N个路灯 从位置0开始安装 路灯之间间距固定为100米 每个路灯都有自己的照明半径 请计算第一个路灯和最后一个路灯之间 无法照明的区间的长度和 输入描述 第一行为一个数N 表示路灯个数 1 lt N lt

  • 课程设计总结

    1 政府职能部门 望细分 具体 课程压缩所致 2 企业家 结构好 利于规划 参考 强烈希望协调与管理融合进来 3 工程师 技术人员 指导行强 望精化 深化 细化 4 学生 利于未来规划 创业 就业 发展 学习方向等等 老师总结课程缺陷 1

  • 虚拟机VMware的安装及使用

    一 虚拟机VMware的安装 1 准备工作 1 需要软件VMware安装包 VMware下载地址 http www uzzf com soft 51188 html 2 需要一个系统镜像 windows系统 http www xitongc

  • 【计算机视觉】最后显示的CIFAR-100数据集照片很模糊怎么解决？

    文章目录 一 前言 二 如何解决 2 1 使用图像增强技术 2 2 使用插值方法 2 3 使用更高分辨率的图像数据集 2 4 手动调整图像尺寸 三 总结 一 前言 如果从CIFAR 100数据集加载的图像显示模糊 可能有几个可能的原因 分辨

  • 小程序中里的bindinput_微信小程序中input标签的使用方法（附代码）

    本篇文章给大家带来的内容是关于微信小程序中input标签的使用方法 附代码 有一定的参考价值 有需要的朋友可以参考一下 希望对你有所帮助 在开发过程中经常遇到这样的需求 用户只能输入数字并且只保留小数点两位 虽然我们可以在提交表单的时候进行

  • [ASM C/C++] C函数调用分析

    在执行程序时 操作系统为进程分配一块栈空间来保存函数栈帧 esp寄存器总是指向栈顶 x86平台上这个栈是从高地址向低地址增长的 每次调用一个函数都要分配一个栈帧来保存参数和局部变量 C函数参数是按从右到左的顺序入栈的 各个堆栈桢之间是通过把

  • 多线程（1）：互斥锁

    leetcode 1114题 按序打印 给你一个类 public class Foo public void first print first public void second print second public void thi

  • 【Unity Shader】Shadow Caster、RenderType和_CameraDepthTexture

    当我们制作某些屏幕特效时 需要取到屏幕的深度图或法线图 比如ssao 景深等 另外像是制作软粒子shader 体积雾等也需要取到深度图 以计算深度差等 unity提供了两个内置的纹理 CameraDepthTexture和 CameraDe

  • fabric 环境快速搭建--Ubuntu20.04系统下使用fabric官方脚本搭建

    由于是初识hyper ledger fabric在安装的时候遇到了很多的问题 最后在师兄的帮助下终于删了从头到尾安装了一遍 因此想记录一下 并且给和我遇到相同问题的小伙伴提供一些帮助 如果你是萌新 找我就对啦 一 下载虚拟机VMware 直

  • 纯css画三角形及气泡样式的简单画法

    在做项目的过程中 遇到了要写一个气泡的样式 先布局了矩形部分 但小三角形的旗气泡遇到一点困难 后来梳理了一下 以此记录 首先是三角形的画法 三角形的原理就是矩形 然后分成四个三角形 一般使用border来画一个三角形 如下图所示 我们给一个

热门标签