制作箭头和三角形的方法

用div盒子制作简易箭头

div{

width: 30px;

height: 30px;

border-right: 1px solid red;

border-bottom: 1px solid red;

transform: rotate(-45deg);

}

显示如图：

制作三角形：

/* .box{

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid yellow;

} */

 如图：

 可以更改盒子的宽度和高度来改变形状

通过消除不同边框的颜色来得到不同方向的三角形。