对话箭头

<!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. mysql update case when和where之间的注意事项

    在日常开发中由于业务逻辑较为复杂,常常需要用到UPDATE和CASE...WHEN...THEN...ELSE...END一起做一些复杂的更新.有时候因为对这几个字句理解得不透彻会带来很大的困扰.因此 ...

  2. MinGW/MSYS 交叉编译环境搭建

    因为包的依赖关系不清楚,搭建时出错也不知道是什么原因,下面链接老外写的搭建步骤,写的非常详细还有脚本 已经编译的下载地址 http://ingar.satgnu.net/devenv/mingw32/ ...

  3. poj_2674 弹性碰撞

    题目大意 给定一条直线,长度为L 表示区间[0, L].在直线上开始放置N个人,每个人有一个初始位置pos(用到直线上端点0的距离表示)和初始方向dir('p' 或 'P' 表示向端点L行走, 'n' ...

  4. ionic添加admob广告教程

    1.在你的ionic项目中使用如下命令添加admob插件: cordova plugin add cordova-plugin-admobpro 2.添加完成后,在$ionicPlatform.rea ...

  5. shell定时任务

    1.认识Croncron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务:/sbin/se ...

  6. operator new与new operator的区别

    原文地址:http://www.cnblogs.com/jamesmile/archive/2010/04/17/1714311.html,在此感谢 C++中的operator new与new ope ...

  7. Fresco 源码分析(三) Fresco服务端处理(2) Producer具体实现的内容

    我们以mProducerFactory.newNetworkFetchProducer()为例,因为这些创建新的producer的方式类似,区别在于是否有包装的处理器,即如果当前处理器中没有正在处理的 ...

  8. PHP5.3 goto操作符介绍

    goto操作符是PHP5.+后新增功能,用来跳转到程序的另一位置:用法很简单:goto后面带上目标位置的标志,在目标位置上用目标名加冒号标记如下: <?php goto a; echo 'aaa ...

  9. hdu 1011 树形dp

    题意:是有n个洞组成一棵树,你有m个士兵,你从1号房间开始攻打,每个洞有a个"bugs"和b的价值.你的一个士兵可以打20 个"bugs",为了拿到这个洞的价值 ...

  10. hdu 4165 dp

    可以用卡特兰数做 以下分析转自:http://www.cnblogs.com/kevinACMer/p/3724640.html?utm_source=tuicool 这道题之前自己做的时候并没有反应 ...