上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法
http://blog.csdn.net/zhouzme/article/details/18901943
,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .area { margin:100px auto; width:300px; height: 150px; } .item { float:left; clear:both; margin-bottom:23px; } /* 向上的箭头 */ .dot-top { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-top-width: 0; border-style: dashed; border-bottom-style: solid; border-left-color: transparent; border-right-color: transparent; } /* 向右的箭头 */ .dot-right { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-right-width: 0; border-style: dashed; border-left-style: solid; border-top-color: transparent; border-bottom-color: transparent; } /* 向下的箭头 */ .dot-bottom { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-bottom-width: 0; border-style: dashed; border-top-style: solid; border-left-color: transparent; border-right-color: transparent; } /* 向左的箭头 */ .dot-left { font-size: 0; line-height: 0; border-width: 10px; border-color: red; border-left-width: 0; border-style: dashed; border-right-style: solid; border-top-color: transparent; border-bottom-color: transparent; } </style> </head> <body> <div class="area"> <span class="item dot-top"></span> <span class="item dot-right"></span> <span class="item dot-bottom"></span> <span class="item dot-left"></span> </div> </body> </html>
可以通过设置 border-width 来调整箭头的大小,这样就不需要每次都去做图了,非常方便,颜色可以随时调整,真佩服那位老兄,以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头,太厉害了
显示结果图: