CSS实现箭头效果
2016-07-06 14:42
369 查看
<!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>
相关文章推荐
- css3学习 之 css选择器(css3 属性选择器)
- css+html 关于文本的总结(整理中)
- 左侧固定菜单,右侧浮动菜单样式示例代码
- css的全局样式
- JavaEE第二天_css+js
- CSS图片剪裁与原比例压缩或放大
- css3特性汇总
- CSS实例教程:十步学会用CSS建站
- load-awesome 53种纯CSS3预加载页面loading指示器动画特效
- CSS实现三角原理
- 设置Button样式
- 用意图明确的CSS选择器直击元素
- 解读浮动闭合最佳方案:clearfix
- Animate.css 一款强大的预设css3动画库
- css万能居中方法
- CSS布局之圣杯布局和双飞翼布局
- 谷歌浏览器样式调试技巧点
- HTML学习总结(2)-标签样式初始化
- 弹窗、遮罩层
- ul ol li的序号编号样式