视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用css实现的效果（支持ie6,7哦）
<style> /*border实现三角*/ /*箭头向上*/ .arrow-top{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-bottom: 5px solid red; } /*箭头向下*/ .arrow-bottom{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-top: 5px solid red; } /*箭头向右*/ .arrow-right{ width : 0; height : 0; font-size : 0; line-height : 0; border-bottom: 5px dashed transparent; border-top: 5px dashed transparent; border-left: 5px solid red; } /*箭头向左*/ .arrow-left{ width : 0; height : 0; font-size : 0; line-height : 0; border-bottom: 5px dashed transparent; border-top: 5px dashed transparent; border-right: 5px solid red; } </style>
来看看整体html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>border实现三角</title> <style> /*border实现三角*/ /*箭头向上*/ .arrow-top{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-bottom: 5px solid red; } /*箭头向下*/ .arrow-bottom{ width : 0; height : 0; font-size : 0; line-height : 0; border-left: 5px dashed transparent; border-right: 5px dashed transparent; border-top: 5px solid red; } /*箭头向右*/ .arrow-right{ width : 0; height : 0; font-size : 0; line-height : 0; border-bottom: 5px dashed transparent; border-top: 5px dashed transparent; border-left: 5px solid red; } /*箭头向左*/ .arrow-left{ width : 0; height : 0; font-size : 0; line-height : 0; border-bottom: 5px dashed transparent; border-top: 5px dashed transparent; border-right: 5px solid red; } </style> </head> <body> <div> <span>店铺信息</span> <span class="arrow-right" style="display: inline-block;"></span> <span class="arrow-left" style="display: inline-block;"></span> <span class="arrow-top" style="display: inline-block;"></span> <span class="arrow-bottom" style="display: inline-block;"></span> </div> </body> </html>