程序员经验分享-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画三角形及气泡样式的简单画法 的相关文章

随机推荐

  • 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来画一个三角形 如下图所示 我们给一个

热门标签