有时候网页中使用箭头以增强效果，一般的做法是使用图片，今天我们使用CSSCSS来实现“箭头效果”，使用CSS我们必须兼容所有浏览器（IE6、7、8、9、10、+），Chrome，Firefox，Opear...

 1 <!doctype html>

 2 <html lang="en">

 3 <head>

 4 <meta charset="UTF-8">

 5 <meta name="Generator" content="Kingwell">

 6 <meta name="Author" content="Kingwell Leng">

 7 <meta name="Keywords" content="">

 8 <meta name="Description" content="">

 9 <title>Document</title>

10 <style type="text/css">

11 body,td,div,tr,table{padding:0; margin:0}

12 table{width:50%; font-size:14px; font-family:Arial; color:#333}

13

14

15 .arrow-top,.arrow-right,.arrow-bottom,.arrow-left{font-size:0; line-height:0; height:0; width:0; cursor:pointer}

16 .box{ border:1px solid #CCC; width:100px; height:100px; padding:10px; background:#EEE; margin:10px}

17 .arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}

18 .arrow-bottom{ border-width:50px; border-color:red transparent transparent transparent;  border-style:solid dashed dashed dashed; border-bottom:none;}

19 .arrow-left{ border-width:50px; border-color:transparent green transparent transparent;  border-style:dashed solid dashed dashed; border-left:none;}

20 .arrow-top{ border-width:50px; border-color:transparent transparent blue transparent;  border-style:dashed dashed solid dashed; border-top:none;}

21 .arrow-right{ border-width:50px; border-color:transparent transparent transparent black;  border-style:dashed dashed dashed solid; border-right:none;}

22 </style>

23 <script type="text/javascript">

24

25 </script>

26 </head>

27 <body>

28 <table>

29     <tr>

30         <td>

31             <div class="box">

32                 <div class="arrow"></div>

33             </div>

34         </td>

35         <td>

36         <p>.arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}</p>

37         </td>

38     </tr>

39     <tr>

40         <td>

41             <div class="box">

42                 <div class="arrow-top"></div>

43             </div>

44         </td>

45         <td>

46         <p>.arrow-top{ border-width:50px; border-color:red transparent transparent transparent;  border-style:solid dashed dashed dashed; border-bottom:none;}

47 </p>

48         </td>

49     </tr>

50     <tr>

51         <td>

52             <div class="box">

53                 <div class="arrow-right"></div>

54             </div>

55         </td>

56         <td>

57         <p>.arrow-right{ border-width:50px; border-color:transparent green transparent transparent;  border-style:dashed solid dashed dashed; border-left:none;}

58 </p>

59         </td>

60     </tr>

61     <tr>

62         <td>

63             <div class="box">

64                 <div class="arrow-bottom"></div>

65             </div>

66         </td>

67         <td>

68         <p>.arrow-bottom{ border-width:50px; border-color:transparent transparent blue transparent;  border-style:dashed dashed solid dashed; border-top:none;}

69 </p>

70         </td>

71     </tr>

72     <tr>

73         <td>

74             <div class="box">

75                 <div class="arrow-left"></div>

76             </div>

77         </td>

78         <td>

79         <p>.arrow-left{ border-width:50px; border-color:transparent transparent transparent black;  border-style:dashed dashed dashed solid; border-right:none;}

80 </p>

81         </td>

82     </tr>

83 </table>

84

85 </body>

86 </html>

、

CSS实现箭头效果的更多相关文章

  1. CSS效果：CSS实用技巧制作三角形以及箭头效果

    实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...

  2. css3箭头效果

    css3 record1 尝试用css写了个箭头效果 思路就是通过span和span子元素i分别通过设置他们的伪元素构造两个箭头,但是i构造的箭头两条线height都是0,hover的时候渐近的动画效 ...

  3. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  4. 纯CSS实现箭头、气泡让提示功能具有三角形图标（简单实例）

    <style type="text/css"> /*向上箭头,类似A,只有三个边,不能指定上边框*/ .arrow-up { width: 0px; height: 0 ...

  5. React 系列教程 1：实现 Animate.css 官网效果

    前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...

  6. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  7. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

随机推荐

  1. android android.mk中:= ?= +=之间的区别

    转自:http://blog.csdn.net/love_xsq/article/details/50395138 在Makefile中我们经常看到 = := ?= +=这几个赋值运算符,那么他们有什 ...

  2. sql 两列数据交换

    MSSQL的处理方法   update table1 set field_1 = field_2, field_2 = field_1 可是MySQL就不能这样写,不然一列会覆盖另一列记录   MyS ...

  3. Kafka设计解析

    Kafka剖析(一):Kafka背景及架构介绍 Kafka设计解析(二):Kafka High Availability (上) Kafka设计解析(三):Kafka High Availabilit ...

  4. HDU4787_GRE Words Revenge

    这个题目做得泪牛满面. 题目为给你若干串,有的表示添加一个串,有的表示询问一个串有多少个字串为前面出现过的串. 题目一看就知道肯定是AC自动机(不过后缀自动机也是可以的) 但是细想就会发现AC自动机好 ...

  5. Problem D - Non-boring sequences——Contest1004 - National Day Training Contest -- Day3

    今天比赛的时候做的一个坑题.深坑啊. 题目意思是给你一个有n个数的数字序列.要你判断对于这个序列是都满足任意一个子序列都至少含有一个只出现一次的数字. 看完题目后没什么思路,一直以为要用线段树,每次删 ...

  6. [乱搞]hdu 6406 Taotao picks apples 笛卡尔树+倍增

    题目链接 Problem Description There is an apple tree in front of Taotao's house. When autumn comes, n app ...

  7. BZOJ4899 记忆的轮廓（概率期望+动态规划+决策单调性）

    容易发现跟树没什么关系,可以预处理出每个点若走向分叉点期望走多少步才能回到上个存档点,就变为链上问题了.考虑dp,显然有f[i][j]表示在i~n中设置了j个存档点,其中i设置存档点的最优期望步数.转 ...

  8. Opencv2.4.9+win7+VS2012一次性配置的方法--通过建立属性表永久配置

    Opencv的配置对于初学者很麻烦,网上的教程也非常多,针对不同的操作系统.opencv版本.Visual studio版本都有相应的教程,但即便是按照教程一步一步来,仍然难免出错,很多教程还是一次性 ...

  9. BZOJ5314 [Jsoi2018]潜入行动 【背包类树形dp】

    题目链接 BZOJ5314 题解 设\(f[i][j][0|1][0|1]\)表示\(i\)为根的子树,用了\(j\)个监测器,\(i\)节点是否被控制,\(i\)节点是否放置的方案数 然后转移即可 ...

  10. TC规则

    633人阅读   TC规则涉及到 队列(QUEUE) 分类器(CLASS) 过滤器(FILTER),filter划分的标志位可用U32或iptables的set-mark来实现 ) 一般是" ...