<div class="arrow-up">
<!--向上的三角-->
</div>
<div class="arrow-down">
<!--向下的三角-->
</div>
<div class="arrow-left">
<!--向左的三角-->
</div>
<div class="arrow-right">
<!--向右的三角-->
</div>
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
CSS实现三角图标
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 1.思想：相当于两个css三角形图标的部分重合组成 2.css 代码 .slide{ display: none...
- 说明一下：当点击 datagrid 表头某一列的小三角图标时，easyui 本身是有排序的，但是在当我们对 dat...
- 最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊，分页的样式。来张截图： 你在首页的底部也可以看到这样一...
