css3制作网页中常见的小箭头
Posted KindJob
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3制作网页中常见的小箭头相关的知识，希望对你有一定的参考价值。
在浏览网页时候，我们有时候通常看一个页面标题时，都会有一个小箭头，一般这种箭头就是表示，下面还有一层东西。页面制作的时候，我们有时候会去直接找icon，有时候只有少数的时候，就会采用样式的方法，直接给写出来。
下面呢，我们就用css3，来制作一下简单的箭头效果。大家有没有发现，其实css3功能还是挺强大的哦。
第一种箭头：
/* css3三角形（向上 ▲） */
div.arrow-up {
width:0px;
height:0px;
border-left:5px solid transparent; /* 右透明 */
border-right:5px solid transparent; /*右透明 */
border-bottom:5px solid #2f2f2f; /* 定义底部颜色 */
font-size:0px;
line-height:0px;
}
第二种箭头：
/* css3三角形（向下 ▼） */
div.arrow-down {
width:0px;
height:0px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #2f2f2f;
font-size:0px;
line-height:0px;
}
第三种箭头：
/* css3三角形（向左） */
div.arrow-left {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-right:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
第四种箭头：
/* css3三角形（向右） */
div.arrow-rightright {
width:0px;
height:0px;
border-bottom:5px solid transparent; /* left arrow slant */
border-top:5px solid transparent; /* right arrow slant */
border-left:5px solid #2f2f2f; /* bottom, add background color here */
font-size:0px;
line-height:0px;
}
上面呢就是上下左右的四种箭头，大家有没有仔细的查看一下，有很多相似的地方呢。基本上改的都是bottom，top，left，以及right，而且大家有没有发现，上下对称，左右对称的呢。只要稍微改一下对称的位置就可以了的。所以，一般这种的话，我们是可以举一反三的。
以上是关于css3制作网页中常见的小箭头的主要内容，如果未能解决你的问题，请参考以下文章