有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我们使用CSSCSS来实现“箭头效果”,使用CSS我们必须兼容所有浏览器(IE6、7、8、9、10、+),Chrome,Firefox,Opear...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="Kingwell"> <meta name="Author" content="Kingwell Leng"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> body,td,div,tr,table{padding:0; margin:0} table{width:50%; font-size:14px; font-family:Arial; color:#333} .arrow-top,.arrow-right,.arrow-bottom,.arrow-left{font-size:0; line-height:0; height:0; width:0; cursor:pointer} .box{ border:1px solid #CCC; width:100px; height:100px; padding:10px; background:#EEE; margin:10px} .arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid} .arrow-bottom{ border-width:50px; border-color:red transparent transparent transparent; border-style:solid dashed dashed dashed; border-bottom:none;} .arrow-left{ border-width:50px; border-color:transparent green transparent transparent; border-style:dashed solid dashed dashed; border-left:none;} .arrow-top{ border-width:50px; border-color:transparent transparent blue transparent; border-style:dashed dashed solid dashed; border-top:none;} .arrow-right{ border-width:50px; border-color:transparent transparent transparent black; border-style:dashed dashed dashed solid; border-right:none;} </style> <script type="text/javascript"> </script> </head> <body> <table> <tr> <td> <div class="box"> <div class="arrow"></div> </div> </td> <td> <p>.arrow{ border-width:50px; border-color:red green blue black; border-style:solid solid solid solid}</p> </td> </tr> <tr> <td> <div class="box"> <div class="arrow-top"></div> </div> </td> <td> <p>.arrow-top{ border-width:50px; border-color:red transparent transparent transparent; border-style:solid dashed dashed dashed; border-bottom:none;} </p> </td> </tr> <tr> <td> <div class="box"> <div class="arrow-right"></div> </div> </td> <td> <p>.arrow-right{ border-width:50px; border-color:transparent green transparent transparent; border-style:dashed solid dashed dashed; border-left:none;} </p> </td> </tr> <tr> <td> <div class="box"> <div class="arrow-bottom"></div> </div> </td> <td> <p>.arrow-bottom{ border-width:50px; border-color:transparent transparent blue transparent; border-style:dashed dashed solid dashed; border-top:none;} </p> </td> </tr> <tr> <td> <div class="box"> <div class="arrow-left"></div> </div> </td> <td> <p>.arrow-left{ border-width:50px; border-color:transparent transparent transparent black; border-style:dashed dashed dashed solid; border-right:none;} </p> </td> </tr> </table> </body> </html>
相关推荐
css样式控制实现图片无缝滚动,移动的速度是匀速,并且速度可控。
利用CSS :AFTER :BEFORE selector实现菜单带箭头效果
聊天内容需要用到气泡修饰,纯CSS开发的气泡式提示框,我们都熟悉使用CSS来生成页面上丰富的样式
使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
用css实现边框流动光线效果.........................................................................................
css3实现3D时间轴效果
主要介绍了css实现带箭头和圆点的轮播的相关资料,当鼠标移入图片、圆点和方向键时,停止轮播,移除恢复。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。 最常用的就是用css实现的小三角了 #triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid transparent; ...
css实现气泡框效果,网上有很多种JS框架都提供这种功能,为了学习这种效果,今天我们自己用CSS写一个气泡效果。
演示地址:CSS Triangles Demo 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements) 最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形...
CSS jQuery共同实现的一款带动画效果的菜单,菜单上的箭头会翻转的动画二级下拉菜单,风格十分简洁,几乎没有使用图片美化。菜单颜色若要修改,可直接修改CSs代码即可。菜单动画效果的实现主要是引入了jquery插件来...
jQuery+CSS3实现带有左右箭头滑动切换效果的幻灯片.zip
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件
使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...
先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形;只不过它这个尖角是通过两个三角形来实现的; 首先新建一个div,画出提示框的轮廓 <div class=demo></div> 给定样式: .demo{...
在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响。今天飞鸟慕鱼小编就给大家说一...
本文实例讲述了基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款黑色风格的CSS菜单,带阴影和小箭头效果,纯CSS技术实现的,没有借助任何的JavaScript代码,风格非常...