css实现三角形
image.png
具体实现思路
- 将div的宽高分别设置为0
2.由边框来控制三角形的大小
3.将所有的边框的颜色都设置为透明（transparent）
4.将其中一个边框颜色修改为自己想要的颜色（top：代表下三角形，bottom：上三角形， left：向右的三角形， right：向左的三角形）
//html--向上的三角形
<div class="icon-triangle"></div>
//css
.icon-triangle {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: rgba(255, 161, 60, 1);//向上的三角形
//border-top-color: rgba(255, 161, 60, 1);//向下的三角形
//border-left-color: rgba(255, 161, 60, 1); //向右的三角形
//border-right-color: rgba(255, 161, 60, 1); //向左的三角形
}
image.png
image.png
