当前位置: 首页 > 前端技术 > 正文

CSS的箭头代码

CSS三角形.只使用纯CSS语言,你就能创建兼容各个浏览器的三角形,用很少的代码。

最终效果如下图所示:

css三角形

/* 向上的箭头,类似于A,只有三个边,不能指定上边框 */

div.arrow-up {  
    width: 0;   
    height: 0;   
    border-left: 5px solid transparent;  /* 左边框的宽 */  
    border-right: 5px solid transparent; /* 右边框的宽 */  
    border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}

/* 向下的箭头 类似于 V */

div.arrow-down {  
    width: 0;   
    height: 0;   
    border-left: 20px solid transparent;  
    border-right: 20px solid transparent;  
    border-top: 20px solid #f00;  
    font-size: 0;  
    line-height: 0;  
}

/* 向左的箭头: 只有三个边:上、下、右。而 <| 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度 */

div.arrow-left {  
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-right: 10px solid yellow; /* 右边框的长度|宽度,以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}

/* 向右的箭头: 只有三个边:上、下、左。而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度 */

div.arrow-right {  
    width: 0;   
    height: 0;   
    border-bottom: 15px solid transparent;  /* 下边框的高 */  
    border-top: 15px solid transparent; /* 上方边框的高 */  
    border-left: 60px solid green; /* 左边框的长度|宽度,以及背景色 */  
    font-size: 0;  
    line-height: 0;  
}

其中的秘密,就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。

边框越大,三角形就越大。调整三个边框的长度,就可以构建出各种不同的三角形。如果加上旋转,不知道似的否可以指定各种不同方向的图形?

另外一种写法,以向上举例:

i.arrow-up{
display: inline-block;
width: 0;
height: 0;
border-width: 10px;
border-style: dashed;
border-color: transparent; /* 透明 */
border-top-width: 0;
border-bottom-color: #e7e7eb;
border-bottom-style: solid;
}

当然,这个处理方法优越的地方就在于代码量非常少,同时非常灵活。

CSS的箭头代码:等您来吐槽!