如何用css实现倒三角与正三角样式

前提问题：需求样式中需要写出倒三角指示当下点击的点

解决过程：css样式写出正三角或者倒三角用的是均分原理，例如一个盒子是四条边，可以设置边的宽度、颜色、样式（实线、虚线或者点线），用css表达分别是border-width、border-color、border-style、也可以写在一起，例如border:1px solid red。一个盒子的右上角是由上面的线和右边的线共同组成的，从对角线进行均分，上边和右边各占45度，其他三个也同理

解决结果：

实现正三角：将盒子宽度和高度都设置为0，利用均分原理，分别设置border-left和border-right为5px的透明实线，此时左上角和右上角的45度目前是透明状态，再将border-bottom设置为5px的红色实线，那么左上角和右上角另外的45度是红色，这样就形成了正三角形

//正三角.triangle {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 5px solid red;}

实现倒三角：与正三角同理分别设置border-left和border-right为5px的透明实线，不同的是将border-top设置为5px的蓝色实线，这样就形成了倒三角形

//倒三角.triangle {width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid blue;}

其中的原理就是利用均分原理，具体样式可以根据个人需要进行修改~

End~