css用边框实现空心三角形和实心三角形

空心三角形如图，最简单的方法就是写一个适当大小带边框的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);
}

是不是很简单呢