border图形小技巧

1. width为0或者height为0

#a{
        margin: 150px auto;
        height: 100px;
        width: 0;
        border-top: 50px solid red ;
        border-bottom: 50px solid yellow ;
        border-right: 50px solid gray;
        border-left: 50px solid aqua;
    }
    #b{
        margin: 150px auto;
        width: 100px;
        height: 0;
        border-top: 15px solid red ;
        border-bottom: 15px solid yellow ;
        border-right: 35px solid gray;
        border-left: 35px solid aqua;
    }

效果：

一切尽在图中

2.小箭头

#a{
        margin: 150px auto;
        width: 0;
        height: 0;
        border: 100px solid #999;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom: none;
        transition: .3s;
    }
    #a:hover{
        transform: rotate(180deg);
    }
    #b{
        margin: 150px auto;
        width: 100px;
        height: 100px;
        border-top: 2px solid #999;
        border-right: 2px solid #999;
        transform: rotate(135deg);
        transition: .3s;
    }
    #b:hover{
        transform: rotate(-45deg);
    }

效果：

2.1 注意点：

2.1.1 实心三角

出于让三角围绕自身中心旋转我们要保证3个border（共4个剩下的一个为none）中的两个border为了隐藏颜色需设为transparent（我们也可以用1中的方法构造小三角）。
让我们来看看下面的图！

由于border-bottom为none（border的默认值为none）所以高度为零，底下全部没有（图中的是我补上去的）！然后此时transform-origin（默认值为center）为border-top的中心即三角的中心。所以我们在设置border-left和border-right的颜色为transparent就行了

2.1.2 空心三角

构造思想是取一个正方形边框的左边和右边然后使其旋转向下

---

很遗憾，我没发现可以使空心三角绕自身中心旋转的方法，如果有小伙伴发现了，或知道，恳请给我留言。