对话箭头

<!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. oracle10G/11G官方下载地址集合 直接迅雷下载

    Oracle Database 11g Release 2 (11.2.0.1.0) for Microsoft Windows (64-bit)   http://download.oracle.c ...

  2. Greedy:Protecting the Flowers(POJ 3262)

    保护花朵 题目大意:就是农夫有很多头牛在践踏花朵,这些牛每分钟破坏D朵花,农夫需要把这些牛一只一只运回去,这些牛各自离牛棚都有T的路程(有往返,而且往返的时候这只牛不会再破坏花),问怎么运才能使被践踏 ...

  3. 【QT】ui转代码

    windows中安装qt目录下的BIN文件夹里有个uic.exe把UIC.exe和你要转换的xxx.ui文件拷贝到同一目录.开始菜单,运行CMD,命令进入uic.exe和xxx.ui的目录,(或在存放 ...

  4. 考前复习(codevs 2837)

    2837 考前复习  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description Aiden马上要考试了,可他 ...

  5. git_2-linux

    在linux下搭建git环境1.创建Github账号,https://github.com2.Linux创建SSH密钥: ssh-keygen  ##一直默认就可以了 3.将公钥加入到Github账户 ...

  6. 为什么内联函数，构造函数，静态成员函数不能为virtual函数

    http://blog.csdn.net/freeboy1015/article/details/7635012 为什么内联函数,构造函数,静态成员函数不能为virtual函数? 1> 内联函数 ...

  7. mysql:表注释和字段注释

    mysql:表注释和字段注释 1 创建表的时候写注释 create table test1 ( field_name int comment '字段的注释' )comment='表的注释'; 2 修改 ...

  8. linux之间文件传输问题

    如果linux服务器使用了秘钥登陆,可以先关闭秘钥登陆 http://blog.chinaunix.net/uid-23634108-id-2393471.html 然后:scp -P 端口号  no ...

  9. UVa 11524:In-Circle（解析几何）

    Problem EIn-CircleInput: Standard Input Output: Standard Output In-circle of a triangle is the circl ...

  10. hdu 2050:折线分割平面（水题，递归）

    折线分割平面 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...