<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
.tri {
position: absolute;
left: -21px;
top: 40px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 12px solid #e5e5e5;
border-color: transparent #e5e5e5 transparent transparent;
border-style: dashed solid dashed dashed;
display: block;
}
 
.show {
display: block;
left: 230px;
top: 0;
width: 224px;
line-height: 20px;
font-size: 12px;
background: #fff;
border: 3px solid #ededed;
padding: 5px 0;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.trii {
position: absolute;
left: -2px;
top: -7px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 7px solid #fff;
border-color: transparent #fff transparent transparent;
border-style: dashed solid dashed dashed;
} 
 
.showid{position:absolute;top:-21px;left:40px;height:0;line-height:0;
    font-size:0;border:12px solid #ededed;border-color:transparent transparent #ededed transparent;border-style:dashed dashed solid dashed;
 }
 .showname{position:absolute;top:-1px;left:-8px;border:8px solid #fff;border-color:transparent transparent #fff transparent;border-style:dashed dashed solid dashed;height:0;line-height:0;font-size:0;}
.topshow{
   border:4px solid #ededed;padding:6px;height:100px;width:100px;margin:auto; word-break:break-all; word-wrap:break-word;
}
</style>
</head>
 
<body>
<div style="position:relative;margin:100px 200px 50px">
 <div class="tri" ><div class="trii"></div></div>
 <div class="show" style="height:100px"></div>
</div> 
 
 
<div style="position:relative;width:100px;height:100px;">
 <div class="showid"><div class="showname"></div></div>
 <div class="topshow">11111333333333</div>
</div>
</body>
</html>

arrow css的更多相关文章

  1. bootstrap--双日历插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  3. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  4. 》》webpack打包成的文件

    /******/(function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installed ...

  5. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  6. python生成组织架构图(网络拓扑图、graph.editor拓扑图编辑器)

    Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是Qunee图形组件的扩展项目,旨在提供可供扩展的拓扑图编辑工具, 拓扑图展示.编辑.导出.保存等功能,此外 ...

  7. 使用jquery.validation+jquery.poshytip做表单验证--未完待续

    jqueryValidate的具体使用方法很多,这里就不在赘述,这一次只谈一下怎样简单的实现表单验证. 整片文章目的,通过JQvalidation按表单属性配置规则验证,并将验证结果通过poshyti ...

  8. easyform表单校验插件改版源码

    改动特性: 1.支持回调,可用于ajax提交 2.提示框样式修改,原版太丑,修改成bootstrap的popover  样式 原版还存在缺陷:被校验的表单元素设置不灵活,还得加上id.name 什么的 ...

  9. Code-NFine：变量修改

    ylbtech-Code-NFine:Cookie变量修改 1. NFine.Code返回顶部 1.Operator 1.1.OperatorProvider.cs /**************** ...

随机推荐

  1. [C和指针]第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. SQL 批量删除数据表

    ) while(exists(select * from sysobjects where name like '表名前缀%')) begin select @name=name from sysob ...

  3. ServiceStack.OrmLite 笔记9 -code first 必须的代码优先

    复杂点的使用3 code first的使用,支持复杂类型 public enum PhoneType { Home, Work, Mobile, } public enum AddressType { ...

  4. 现在有T1、T2、T3三个线程，怎样保证T2在T1执行完后执行，T3在T2执行完后执行？使用Join

    public class TestJoin { public static void main(String[] args) { Thread t1 = new Thread(new T1(), &q ...

  5. FLASH CC 2015 CANVAS （一） 与AS3的写法区别

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3 JS stop() this.stop(); mc.stop() this.mc.stop( ...

  6. 2013/7/16 HNU_训练赛4

    CF328B Sheldon and Ice Pieces 题意:给定一个数字序列,问后面的数字元素能够组成最多的组数. 分析:把2和5,6和9看作是一个元素,然后求出一个最小的组数就可以了. #in ...

  7. redis问题

    phalcon 在读取数据的时候如果说reids数据库没有连接成功的话,则会显示一下错误:

  8. java程序设计单一原则

    在我的程序设计中一般一个类就负责一个职责 ex: class Animal{ public void brether(String animal){ System.out.println(animal ...

  9. JS自总结

    1.js获得当前元素   event.srcElement:   获取当前父元素   event.srcElement.parentElement   var rowIndex = e.parentE ...

  10. Android网络编程系列 一 JavaSecurity之JSSE(SSL/TLS)

    摘要:     Java Security在Java存在已久了而且它是一个非常重要且独立的版块,包含了很多的知识点,常见的有MD5,DigitalSignature等,而Android在Java Se ...