<!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. Singelton单例模式

    单例,相当于一个全局变量,在整个应用程序中保证只有一个类的实例存在. 线程池.数据库连接池.缓存.日志等对象常被设计成单例 实例: 1.懒汉式单例 /** * 懒汉式单例Singelton:是一种创建 ...

  2. eclipse svn 忽略 target目录 等等... 我用的后边的方法 （转载）

    这个build失败的解决方案就是不要把你项目的 target目录放在src repository 里面,还有 .project 和 .classpath 最好也别放到src repository 里. ...

  3. 利用EL表达式+JSTL在客户端取得数据 示例

    <%@page import="cn.gbx.domain.Address"%> <%@page import="cn.gbx.domain.User& ...

  4. linux使用脚本自动连接数据库

    脚本名: mtest1.sh #!/bin/bash # test connecting to the Mysql server MYSQL=`which mysql` $MYSQL test -u ...

  5. iOS - OC NSValue 值

    前言 @interface NSValue : NSObject <NSCopying, NSSecureCoding> 将任意数据类型包装成 OC 对象 1.比较两个 NSValue 类 ...

  6. JavaWeb学习计划

    1 HTML2 CSS3 JavaScript4 XML5 Tomcat6 Servlet7 HTTP8 Cookie Session9 JSP10 JSTL11 MySQL12 JDBC13 过滤器 ...

  7. a链接onclick="window.location.href=在ie6上面无法执行解决

    <a href="javascript:void(0)" onclick="window.location.href=document.getElementById ...

  8. C++——对象和类

    最重要的OOP特性: *抽象: *封装和数据隐藏: *多态: *继承: *代码的可重用性: 一.抽象和类 1.类型 指定基本类型完成了三项工作:1).决定数据对象需要的内存数量:2).决定如何解释内存 ...

  9. [css] line-height

    原文:http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4 ...

  10. Python Paramiko模块安装和使用

    1.简介 大家会发现,常见的解决方法都会需要对远程服务器必要的配置,如果远程服务器只有一两台还好说,如果有N台,还需要逐台进行配置,或者需要使用代码进行以上操作时,上面的办法就不太方便了. 使用par ...