<!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. 自动编号维护SNRO

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

  2. CUBRID学习笔记 30 复制表结构 cubrid教程

    语法 CREATE {TABLE | CLASS} <new_table_name> LIKE <old_table_name> 如下 CREATE TABLE a_tbl( ...

  3. hdu 1700 Points on Cycle（坐标旋转）

    http://acm.hdu.edu.cn/showproblem.php?pid=1700 Points on Cycle Time Limit: 1000/1000 MS (Java/Others ...

  4. weblogic与axis2 jar包冲突

    1.org.springframework.web.util.NestedServletException: Handler processing failed; nested exception i ...

  5. 一个js（javascript）使用案例

    <script type="text/javascript"> var Row; $(function () { // $("#Sel").clic ...

  6. typeof instanceof

    typeof用以获取一个变量的类型,typeof一般只能返回如下几个结果:number,boolean,string,function,object,undefinedinstanceof用于判断一个 ...

  7. PHP面向对象(OOP)编程入门教程————如何实例化对象？

    我们上面说过面向对象程序的单位就是对象,但对象又是通过类的实例化出来的,既然我们类会声明了,下一步就是实例化对象了. 当定义好类后,我们使用new关键字来生成一个对象. $对象名称 = new 类名称 ...

  8. random使用

    package com.cz.test; import java.util.Random; public class RandomTest { public static void main(Stri ...

  9. spring DI原理

    什么是IOC? 也称依赖注入 当一个类,需要另一个类的时候,我们不需要再另一个类里进行创建 对象,spring容器会给我们自动的创建 IOC的实现? 通过一定的技术读取spring.xml文件信息,比 ...

  10. 半平面交模板（O（n*n）&& O(n*log(n)）

    摘自http://blog.csdn.net/accry/article/details/6070621 首先解决问题:什么是半平面? 顾名思义,半平面就是指平面的一半,我们知道,一条直线可以将平面分 ...