图一：
图二：
<!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. awk入门【转】

    awk其实不仅仅是工具软件,还是一种编程语言.不过,本文只介绍它的命令行用法,对于大多数场合,应该足够用了. 一.基本用法 awk的基本用法就是下面的形式. # 格式 $ awk 动作 文件名 # 示 ...

  2. keepalived的vip无法ping通【原创】

    今天收到redis的keepalived vip无法ping通的告警,查看服务器和服务时发现vip在服务器上,服务也正常.只能在本机ping通,跨网段无法ping通.切换keepalived vip至 ...

  3. mysqlfrm初步使用

    这个工具也就是读取frm文件生成建表语句默认的模式是再生个实例,使用--basedir选项或指定--server选项来连接到已经安装的实例.这种过程不会改变原始的.frm文件.该模式也需要指定--po ...

  4. [HTTP]HTTP 中的 Transfer-Encoding 报文头

    一.背景: 持续连接的问题:对于非持续连接,浏览器可以通过连接是否关闭来界定请求或响应实体的边界:而对于持续连接,这种方法显然不奏效.有时,尽管我已经发送完所有数据,但浏览器并不知道这一点,它无法得知 ...

  5. mvc 母版页保持不刷新

    //比如这是左边菜单栏 <ul class="treeview-menu" id="left_menu"> <li><a href ...

  6. 8大排序之Python实现 冒泡排序优化

    1.冒泡排序(从大到小):交换发生在内部循环 稳定的排序 冒泡排序的平均时间复杂度是O(n2),最好的时间复杂度是O(n),最坏的时间复杂度是O(n2),空间复杂度为O(1) 冒泡排序的优化在于did ...

  7. LeetCode（123）：买卖股票的最佳时机 III

    Hard! 题目描述: 给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意: 你不能同时参与多笔交易(你必 ...

  8. ajax执行成功后，在success回调函数中把后台返回的list还原到html的table中

    需求描述:前台通过onclick触发ajax,到后台返回一个list(json格式的),把list插入到html的table中. 思路简介:￣□￣|| 刚开始的时候,是没有思路的,就卡在了,怎么把 a ...

  9. 【深度学习】吴恩达网易公开课练习(class1 week3)

    知识点梳理 python工具使用: sklearn: 数据挖掘,数据分析工具,内置logistic回归 matplotlib: 做图工具,可绘制等高线等 绘制散点图: plt.scatter(X[0, ...

  10. matlab提取wind底层数据库操作

    首先需要安装navicat for SQL server 软件, 为了实现Matlab 通过JDBC方式连接Sqlserver数据库, 需要安装Sqlserver JDBC驱动. 地址: https: ...