空心三角形如图,最简单的方法就是写一个适当大小带边框的div,旋转使其成为菱形,因为旋转方向为顺时针所以去掉上边框和左边框,最后定位到需要的位置即可,代码如下:
div {
width: 10px;
height: 10px;
transform: rotate(45deg);
border-bottom: 2px solid #aaaa;
border-right: 2px solid #aaaa;
}
实心三角形如图,最简单的方法就是写一个宽高都为0的div,边框给适当宽度,三个边框设为透明,即可实现任意朝向的实心三角形,最后定位到需要的位置,代码如下:
div {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(175,81,220);
}
是不是很简单呢