图一：
图二：
<!DOCTYPE html>

<html>

<head>

    <title>css 三角形</title>

    <style type="text/css">

        .test_triangle_border {

            width: 200px;

            margin: 0 auto 20px;

            position: relative;

        }

        .test_triangle_border a {

            colro: #333;

            font-weight: bold;

            tex-decoration: none;

        }

        .test_triangle_border .popup {

            width: 100px;

            background: #fc0;

            padding: 10px 20px;

            color: #333;

            border-radius: 4px;

            position: absolute;

            top: 30px;

            left: 30px;

            border: 1px solid #333;

        }

        .test_triangle_border .popup span {

            display: block;

            width: 0;

            height: 0;

            border-width: 0px 10px 10px;

            border-style: solid;

            border-color: transparent transparent #333;

            position: absolute;

            top: -10px;

            left: 50%;

            margin-left: -10px;

        }

        .test_triangle_border .popup em {

            display: block;

            width: 0;

            height: 0;

            border-width: 0px 10px 10px;

            border-style: solid;

            border-color: transparent transparent #fc0;

            position: absolute;

            /* 注销之后，变成图二 */

            top: 1px;

            left: -10px;

            /* 注销之后，变成图二 */

        }

    </style>

</head>

<body>

    <div class="test_triangle_border">

        <a href="#">三角形</a>

        <div class="popup">

            <span><em></em></span>纯CSS写带边框的三角形

        </div>

    </div>

</body>

</html>
 

css3三角形冒泡泡图形制作的更多相关文章

  1. CSS3特殊图形制作

    CSS3特殊图形制作 现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了.废话不多说,现在开始用CSS3画图 1.心型 //HTML < ...

  2. CSS3 三角形运用

      酷酷的 CSS3 三角形运用 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现 ...

  3. CSS3—三角形

    话不多说看效果:演示效果,runjs 1.加了宽高和border,边用不同颜色显示,每条边都是一个梯形 2.去掉宽高,每条边都是三角形 3.只显示其中一条边就是不同的三角形了,是不是很简单,改变bor ...

  4. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  5. react使用引入svg的icon；svg图形制作

    由于手头的icon有限,需要使用更多的图标,就得找外援: 1.react安装icon插件,使用插件里已经有的图标 https://react-icons.netlify.com/#/ React Ic ...

  6. border三角形阴影(不规则图形阴影)和多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...

  7. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  8. 酷酷的CSS3三角形运用

    概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性 ...

  9. 利用CSS3 clip-path裁剪各种图形。

    'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...

随机推荐

  1. vim块编辑删除、插入、替换【转】

    删除列 1.光标定位到要操作的地方. 2.CTRL+v 进入“可视 块”模式,选取这一列操作多少行. 3.d 删除.   插入列 插入操作的话知识稍有区别.例如我们在每一行前都插入"() & ...

  2. MySQL中binlog参数:binlog_rows_query_log_events-记录具体的SQL【转】

    在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...

  3. linux配置supervisor

    linux配置supervisor 安装 pip install supervisor 生成配置文件 使用 echo_supervisord_conf > /etc/supervisord.co ...

  4. 华为QUIDWAY系列路由器的单臂路由配置案例

    作者:邓聪聪 单臂路由 单臂路由(router-on-a-stick)是指在路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网) ...

  5. HttpResonse 要记得关闭

    写了一个小程序,要识别网站上的图片,用到HttpRequest发请求,HttpResponse接受返回数据.刚开始循环可以跑两个,但是总是提示超时.后来查资料发现,在Http协议中,规定了同个Http ...

  6. 8种Nosql数据库系统对比（转）

    导读:Kristóf Kovács 是一位软件架构师和咨询顾问,他最近发布了一片对比各种类型NoSQL数据库的文章. 虽然SQL数据库是非常有用的工具,但经历了15年的一支独秀之后垄断即将被打破.这只 ...

  7. ESXI常用命令

    1.简介 VMware vSphere ESXi6.0常用命令使用,对于一些个人认为比较常用的命令进行总结,如果读者需要了解更多请访问VMware官网下载文档,链接如下:https://www.vmw ...

  8. git与eclipse集成之代码提交

    1.1. 代码提交 编码完成后,需要提交代码,例如新增文件git.txt 1.1.1.        提交代码到个人本地特性分支(commit) 选择工程,右键Team,Synchronize Wor ...

  9. [IOI2000] 邮局

    ## 非常神仙的 wqs 二分优化dp,又学了一招. 首先我们需要先想到一个人类智慧版的前缀和优化. # part 1:violence 然鹅在前缀和优化之前我们先考虑暴力做法:我们可以枚举 i . ...

  10. NOIP模拟赛10 题解

    t3: 题意 给你一棵树,然后每次两种操作:1.给一个节点染色 : 2. 查询一个节点与任意已染色节点 lca 的权值的最大值 分析 考虑一个节点被染色后的影响:令它的所有祖先节点(包括自身)的所有除 ...