前提问题:需求样式中需要写出倒三角指示当下点击的点
解决过程: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~