对话箭头

<!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. ndk编译protobuf库

    ndk_r9编译通过,里面带了自动生成代码的脚本(tool/createPBFile.bat). 下载地址

  2. 彻底禁止QQ更新

    彻底禁止QQ自动更新 彻底禁止QQ自动更新 相信大部分朋友用的QQ都不是腾讯提供的官方原版吧,我本人就用的某精简版本,只保留了自己会用到的个别功能,既省内存,启动也超快,界面更是清爽无比. 但是,这种 ...

  3. 没有注册类 (异常来自 HRESULT:0x80040154 (REGDB_E_CLASSNOTREG))

    解决办法:在项目属性里设置“生成”=>“目标平台”为x86而不是默认的ANY CPU.

  4. js event 2

    js event 2  浏览器兼容 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  5. MATLAB信号与系统分析（四）——离散信号与系统的复频域分析及MATLAB实现

    一.系统的z变换和反变换 1.利用部分分式展开求解逆Z变换: 2.例子 3.Z变换的MATLAB函数 clear all f=sym('cos(a*k)'); F=ztrans(f) F=sym('z ...

  6. Hadoop开发中，如何开启、关闭控制台打印调试信息

    第一种方法: 修改$HADOOP_CONF_DIR/log4j.properties文件 hadoop.root.logger=ALL,console 第二种方法 开启:export HADOOP_R ...

  7. ServletContext图解

    servlet之间共享数据资源!

  8. SDCard存储

    当需要访问SD卡上的文件时,需要按照如下步骤进行 *调用Environment.getExternalStorageState()判读手机上是否插入SD卡(返回MEDIA_MOUNTED则表示已经插入 ...

  9. JavaScript案例六：简单省市联动(NBA版)

    JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单 ...

  10. FZU2219 StarCraft（哈夫曼树）

    一个工人可以变成两个工人,这样可以画出一颗二叉树,那么就是在叶子上建的建筑. 问题的时间花费,可以看作是这颗二叉树中各个叶子的深度*k+叶子对应建筑耗费时间中的最大值. 容易想到,类似哈夫曼树一样,从 ...