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

  1.  1 <!doctype html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4 <meta charset="UTF-8">
  5.  5 <meta name="Generator" content="Kingwell">
  6.  6 <meta name="Author" content="Kingwell Leng">
  7.  7 <meta name="Keywords" content="">
  8.  8 <meta name="Description" content="">
  9.  9 <title>Document</title>
  10. 10 <style type="text/css">
  11. 11 body,td,div,tr,table{padding:0; margin:0}
  12. 12 table{width:50%; font-size:14px; font-family:Arial; color:#333}
  13. 13
  14. 14
  15. 15 .arrow-top,.arrow-right,.arrow-bottom,.arrow-left{font-size:0; line-height:0; height:0; width:0; cursor:pointer}
  16. 16 .box{ border:1px solid #CCC; width:100px; height:100px; padding:10px; background:#EEE; margin:10px}
  17. 17 .arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}
  18. 18 .arrow-bottom{ border-width:50px; border-color:red transparent transparent transparent;  border-style:solid dashed dashed dashed; border-bottom:none;}
  19. 19 .arrow-left{ border-width:50px; border-color:transparent green transparent transparent;  border-style:dashed solid dashed dashed; border-left:none;}
  20. 20 .arrow-top{ border-width:50px; border-color:transparent transparent blue transparent;  border-style:dashed dashed solid dashed; border-top:none;}
  21. 21 .arrow-right{ border-width:50px; border-color:transparent transparent transparent black;  border-style:dashed dashed dashed solid; border-right:none;}
  22. 22 </style>
  23. 23 <script type="text/javascript">
  24. 24
  25. 25 </script>
  26. 26 </head>
  27. 27 <body>
  28. 28 <table>
  29. 29     <tr>
  30. 30         <td>
  31. 31             <div class="box">
  32. 32                 <div class="arrow"></div>
  33. 33             </div>
  34. 34         </td>
  35. 35         <td>
  36. 36         <p>.arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}</p>
  37. 37         </td>
  38. 38     </tr>
  39. 39     <tr>
  40. 40         <td>
  41. 41             <div class="box">
  42. 42                 <div class="arrow-top"></div>
  43. 43             </div>
  44. 44         </td>
  45. 45         <td>
  46. 46         <p>.arrow-top{ border-width:50px; border-color:red transparent transparent transparent;  border-style:solid dashed dashed dashed; border-bottom:none;}
  47. 47 </p>
  48. 48         </td>
  49. 49     </tr>
  50. 50     <tr>
  51. 51         <td>
  52. 52             <div class="box">
  53. 53                 <div class="arrow-right"></div>
  54. 54             </div>
  55. 55         </td>
  56. 56         <td>
  57. 57         <p>.arrow-right{ border-width:50px; border-color:transparent green transparent transparent;  border-style:dashed solid dashed dashed; border-left:none;}
  58. 58 </p>
  59. 59         </td>
  60. 60     </tr>
  61. 61     <tr>
  62. 62         <td>
  63. 63             <div class="box">
  64. 64                 <div class="arrow-bottom"></div>
  65. 65             </div>
  66. 66         </td>
  67. 67         <td>
  68. 68         <p>.arrow-bottom{ border-width:50px; border-color:transparent transparent blue transparent;  border-style:dashed dashed solid dashed; border-top:none;}
  69. 69 </p>
  70. 70         </td>
  71. 71     </tr>
  72. 72     <tr>
  73. 73         <td>
  74. 74             <div class="box">
  75. 75                 <div class="arrow-left"></div>
  76. 76             </div>
  77. 77         </td>
  78. 78         <td>
  79. 79         <p>.arrow-left{ border-width:50px; border-color:transparent transparent transparent black;  border-style:dashed dashed dashed solid; border-right:none;}
  80. 80 </p>
  81. 81         </td>
  82. 82     </tr>
  83. 83 </table>
  84. 84
  85. 85 </body>
  86. 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. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  2. JMeter脚本增强之集合点

    集合点的概念:用于实现所谓并发操作,如果集合点设定是10个人,那么所有的用户就会在同一条起跑线上等着后面的人,等10个人到齐了就哗地一下全部跑出去执行同一个动作.如果设置了超时,那么过了超时时间,有可 ...

  3. 第209天：jQuery运动框架封装（二）

    运动框架 一.函数------单物体运动框架封装 1.基于时间的运动原理 动画时间进程 动画距离进程 图解: 物体从0移动到400 当物体移动到200的时候 走了50% 同样的,物体总共运行需要4秒 ...

  4. 第202天：js---原型与原型链终极详解

    一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 var o1 = ...

  5. 【bzoj2669】[cqoi2012]局部极小值 容斥原理+状压dp

    题目描述 有一个n行m列的整数矩阵,其中1到nm之间的每个整数恰好出现一次.如果一个格子比所有相邻格子(相邻是指有公共边或公共顶点)都小,我们说这个格子是局部极小值. 给出所有局部极小值的位置,你的任 ...

  6. Java Servlet异步处理、非阻塞I/O和文件上传

    异步处理 应用服务器中的 web容器通常对各个客户端情求分别使用一个服务器线程.在工作负载很繁重的情况下,容器常要大量线程来为所有客户端请求服务.可扩展性限制包括内存用尽,或容器线程池耗尽.为了创建可 ...

  7. Glide加载图片并保存到本地返回file,bitmap

    有很多朋友都想要知道32位和64位的区别是什么,因为大家都拿不准自己要装32位系统还是64位系统,因此彷徨是必然的.那么到底区别是啥咧?如果大家想要知道的话,下面就让小编给大家带来32位和64位的区别 ...

  8. 《Linux内核设计与实现》第1、2章读书笔记

    第一章 1.Unix内核特点 十分简洁:仅提供几百个系统调用并且有明确的目的: 在Unix中,大部分东西都被(或者正致力于)被当做文件对待: Unix内核即相关系统工具软件都是用C语言编写的,这使得系 ...

  9. 使用adb命令查看apk版本

    adb devices  (显示连接的设备) adb root   (获取手机root权限) adb remount  (重新挂载系统分区,使系统分区重新可写) adb shell (进入目标设备的L ...

  10. 解题：由乃OI 2018 五彩斑斓的世界

    题面 写在前面的扯淡: 分块的总体学习告一段落,这算是分块集中学习的最后一题么:以后当然也可能会写,就是零零散散的题了=.= 在洛谷上搜ynoi发现好像只有这道题和 由乃OI 2018 未来日记 是分 ...