对话箭头

<!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. 19.python笔记之Rabbitmq

    RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  2. codeforces A. Cinema Line 解题报告

    题目链接:http://codeforces.com/problemset/problem/349/A 题目意思:题目不难理解,从一开始什么钱都没有的情况下,要向每一个人售票,每张票价格是25卢布,这 ...

  3. docke跨主机通信之gre隧道

    GRE简介 GRE可以对网络层的任何协议来进行封装,类似LVS的IPIP协议,在原有的数据报上增加GRE协议数据报.然后在网络上传输,到达对端后,解开GRE数据报头,得到真实的数据报.其中的mac地址 ...

  4. 今天连续几次被其他电脑客户端踢下线，也不知是否是ip冲突

    可能是利用ip然后我的网络也没有关掉共享,其次就是远程开启了一个叫做"学生端"的应用,好在我改密码连续两次改的快

  5. Integer取值范围和NumberFormatException的解决

    项目有个查询当地新闻的接口,从GEO文件中取得code,后台查询. 下午测试的时候查询日本:3920000000,结果报java.lang.NumberFormatException,数字格式化异常, ...

  6. 设计模式学习起点 UML类图笔记

    UML类图笔记 大学开设的软件设计课程一般都会学习UML类图,大部分关于设计模式的描述都是使用的UML类图,可以说类图的表示是学习设计模式的起点.UML定义类之间的关系主要有六种:泛化关系.实现关系. ...

  7. oracle插入数据

    插入数据 insert into comm_error_code_def (ID, ERR_MESSAGE, ERR_CODE, ERR_DESC, NAME, MISC_DESC, STATUS, ...

  8. Struts2中ActionContext和ServletActionContext

    转自:http://blog.sina.com.cn/s/blog_6c9bac050100y9iw.html 在Web应用程序开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在A ...

  9. java中的null和""区别

    (1)问题一:null和""的区别String s=null;string.trim()就会抛出为空的exception String s=""; string ...

  10. Office Word 2013发布带数学公式的博客

    今日在自学冈萨雷斯的<数字图像处理>一书,想做笔记来记录,并分享一些MATLAB代码,又加上刚刚注册博客园的账户,便想着如何能够较为方便的来书写博客.本文主要涉及到的问题有: 如何用wor ...