分享一段代码实例,它实现了箭头效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> /*向上*/ .triangle_border_up { width: 0; height: 0; border-width: 0 30px 30px; border-style: solid; border-color: transparent transparent #333; /*透明 透明 灰*/ margin: 40px auto; position: relative; } .triangle_border_up span { display: block; width: 0; height: 0; border-width: 0 28px 28px; border-style: solid; border-color: transparent transparent #fc0; /*透明 透明 黄*/ position: absolute; top: 1px; left: -28px; } /*向下*/ .triangle_border_down { width: 0; height: 0; border-width: 30px 30px 0; border-style: solid; border-color: #333 transparent transparent; /*灰 透明 透明 */ margin: 40px auto; position: relative; } .triangle_border_down span { display: block; width: 0; height: 0; border-width: 28px 28px 0; border-style: solid; border-color: #fc0 transparent transparent; /*黄 透明 透明 */ position: absolute; top: -29px; left: -28px; } /*向左*/ .triangle_border_left { width: 0; height: 0; border-width: 30px 30px 30px 0; border-style: solid; border-color: transparent #333 transparent transparent; /*透明 灰 透明 透明 */ margin: 40px auto; position: relative; } .triangle_border_left span { display: block; width: 0; height: 0; border-width: 28px 28px 28px 0; border-style: solid; border-color: transparent #fc0 transparent transparent; /*透明 黄 透明 透明 */ position: absolute; top: -28px; left: 1px; } /*向右*/ .triangle_border_right { width: 0; height: 0; border-width: 30px 0 30px 30px; border-style: solid; border-color: transparent transparent transparent #333; /*透明 透明 透明 灰*/ margin: 40px auto; position: relative; } .triangle_border_right span { display: block; width: 0; height: 0; border-width: 28px 0 28px 28px; border-style: solid; border-color: transparent transparent transparent #fc0; /*透明 透明 透明 黄*/ position: absolute; top: -28px; left: -29px; } </style> </head> <body> <!-- 向上的三角形 --> <div class="triangle_border_up"> <span></span> </div> <!-- 向下的三角形 --> <div class="triangle_border_down"> <span></span> </div> <!-- 向左的三角形 --> <div class="triangle_border_left"> <span></span> </div> <!-- 向右的三角形 --> <div class="triangle_border_right"> <span></span> </div> </body> </html>
css border实现上下左右箭头效果,这样的场景在实际项目中还是用的比较多的,关于css border实现上下左右箭头效果就介绍到这了。
css border实现上下左右箭头效果属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98462.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。