对话箭头

<!DOCTYPE HTML>

<html lang="en-US">

    <head>

        <meta charset="UTF-8">

        <title>箭头</title>

        <style type="text/css">

            .pr {

                position: relative;

            }

            .reply-content {

                background-color: #fcfcfc;

                border: 1px solid #fcfcfc;

                border-radius: 4px;

                box-shadow: 0 0 5px #ccc;

                padding: 0.6em;

                width: 50%;

                margin: 0px auto;

            }

            .arrow {

                border-color: transparent #fff transparent transparent;

                border-style: dashed solid dashed dashed;

                border-width: 6px;

                display: block;

                font-size: 0;

                height: 0;

                left: -12px;

                line-height: 0;

                position: absolute;

                top: 8px;

                width: 0;

                z-index: 999;

            }

            /*箭头向上*/

            .arrow-up {

                width: 0;

                height: 0;

                border-left: 30px solid transparent;

                border-right: 30px solid transparent;

                border-bottom: 30px solid #f00;

            }

            /*箭头向右*/

            .arrow-right {

                width: 0;

                height: 0;

                border-top: 20px solid transparent;

                border-bottom: 20px solid transparent;

                border-left: 20px solid green;

            }

            /*箭头向下*/

            .arrow-down {

                width: 0;

                height: 0;

                border-left: 40px solid transparent;

                border-right: 40px solid transparent;

                border-top: 40px solid #ccc;

            }

            /*箭头向左*/

            .arrow-left {

                width: 0;

                height: 0;

                border-top: 30px solid transparent;

                border-bottom: 30px solid transparent;

                border-right: 30px solid #00f;

            }

        </style>

    </head>

    <body>

        <div class="reply-content pr">

            <span class="arrow"></span> 喵了个咪日了狗了

        </div>

    </body>

Html - 对话箭头的更多相关文章

  1. Outlook 2010 对话简介 邮件自动关联

    对话简介 默认情况下,Microsoft Outlook 2010 收件箱中的电子邮件按日期进行组织并按对话进行排列,对话将具有相同主题的邮件组合为能以展开或折叠形式进行查看的对话.这在帮助您提高浏览 ...

  2. MFC中如何画带实心箭头的直线

    工作中遇到话流程图的项目,需要画带箭头的直线,经过摸索,解决:思路如下: (1) 两个点(p1,p2)确定一个直线,以直线的一个端点(假设p2)为原点,设定一个角度 (2)以P2为原点得到向量P2P1 ...

  3. Android快乐贪吃蛇游戏实战项目开发教程-06虚拟方向键（五）绘制方向键箭头

    本系列教程概述与目录:http://www.cnblogs.com/chengyujia/p/5787111.html本系列教程项目源码GitHub地址:https://github.com/jack ...

  4. ES6 箭头函数中的 this？你可能想多了（翻译）

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  5. 不得不吐槽的Android PopupWindow的几个痛点（实现带箭头的上下文菜单遇到的坑）

    说到PopupWindow,我个人感觉是又爱又恨,没有深入使用之前总觉得这个东西应该很简单,很好用,但是真正使用PopupWindow实现一些效果的时候总会遇到一些问题,但是即便是人家的api有问题, ...

  6. 移除HTML5 input在type="number"时的上下小箭头

    /*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...

  7. 去掉Win7快捷方式小箭头(win10通用)

    我是一个有强迫症的优化控 , 因为近视的缘故 , 喜欢将桌面图标放大 ,  但是win7快捷方式的小箭头 , 确实不好看 . 用win7魔方之类的软件 , 可以解决这个问题 , 但是有时候重启 ,   ...

  8. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  9. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

随机推荐

  1. ios 动态测定字符串frame ： boundingRectWithSize函数

    用NSString中的一个方法,第一个参数是text形成的frame的最大的宽度和高度, 其中的options比较关键 CGSize labelSize = [text boundingRectWit ...

  2. Java for LeetCode 073 Set Matrix Zeroes

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. 解题思路: ...

  3. Java for LeetCode 031 Next Permutation

    Next Permutation Total Accepted: 33595 Total Submissions: 134095     Implement next permutation, whi ...

  4. [产品相关] A/B测试终极指南（翻译）

    转载地址: http://blog.sina.com.cn/s/blog_9149268d0100zrx7.html 还记得以前导师说看了英文的文章就把它翻译一下吧,这样会对文章更好地理解,也会有更深 ...

  5. 如何关闭ie9烦人的提示信息？

    ①Q:如何关闭“IE 限制活动内容”的提示? A:去掉“IE 限制活动内容”的提示: 1. 找到IE的“Internet选项”: 2. 选择“高级”选项卡: 3. 在“设置”下,找到子标题“安全”,将 ...

  6. Quartus 软件的使用之PLL的使用

    练习使用Altera FPGA 内的 PLL IP核: 思路:将clk_50M倍频到clk_100M,然后观察100M时钟. 1.生成PLL的核例化文件,然后调用. 点击NEXT之后,等一会会跳出如下 ...

  7. grep' \b\b'

    \b单词锁定符,如: '\bgrep\b'只匹配grep [root@86 ttf-arphic-uming-0.0.20050501]# cat /proc/diskstats 1 0 ram0 0 ...

  8. SQL with as

    姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 先看下面一个嵌套的查询语句 ) 上面的查询语句使用了一个子查询.虽然这条SQL语句并不复杂,但如果嵌套的层次过 ...

  9. Oracle 11g 卸载

    1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...

  10. Synergy

    Synergy 可以在多台电脑之间共享鼠标.键盘.剪贴板.Synergy是一套开源共享软件,完美跨 Win.Linux.Mac运行.真正做到使用一套键盘和鼠标就可控制多个电脑. 下载地址:http:/ ...