<!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. CUBRID学习笔记 8 复制数据库

    1  export  database  类似sqlserver的分离数据库 cubrid unloaddb demodb分离后生成三个文件 demodb_objects, demodb_indexe ...

  2. C#中Application.DoEvents()的作用

    Visual Studio里的摘要:处理当前在消息队列中的所有 Windows 消息. 交出CPU控制权,让系统可以处理队列中的所有Windows消息,比如在大运算量循环内,加Application. ...

  3. HDU 1698 Just a Hook(线段树成段更新)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  4. ajax获取城市和相应的地区

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  5. SonarLint插件的安装与使用

    注意:版本要求Eclipse(4.2,3.8)以上,Java3.1.2,JavaScript 2. 一．SonarLint插件的安装方式 1.安装方式一:在线安装 1)Eclipse工具栏选择Help ...

  6. 转：C++语言的15个晦涩特性

    转自 http://blog.jobbole.com/54140/ 操作符重载和检查顺序 重载,(逗号),||或者&&操作符会引起混乱,因为它打破了正常的检查规则.通常情况下,逗号操作 ...

  7. Spring MVC 之请求处理方法可接收参数(三)

    请求处理方法可接收参数 今天学习了前三个方法. 1.作用域对象2.单个表单提交数据3.表单数据封装的Bean对象 首先创建一个实体对象. package com.cy.springannotation ...

  8. ajax请求超时时间

    http://www.cnblogs.com/charling/p/3356216.html get post 请求 http://www.cnblogs.com/oneword/archive/20 ...

  9. 修改Mac]Bringing interface etch0:Device

    OS版本:Red Hat Enterprise Linux AS4/5 网上有很多关于linux下修改MAC地址的方法,大多依葫芦画瓢,似乎都没验证过,达不到修改的目的. 经过我的详细测试,最终成功解 ...

  10. x+y = ((x&y)<<1) + (x^y) 证明

    法一:我们考虑x,y在二进制表示时候,按位相加其中第i位xi+yi = ((xi&yi)<<1) + (xi^yi)其中(xi&yi)<<1表示当xi和yi都是 ...