首先先了解css画三角形的原理
首先看一个例子:给div添加如下样式,让它的底边框和右边框呈现不同的颜色:
效果如下:
可以发现:css边框border的衔接部分使用斜切衔接!
没错,这就是css画三角形的原理。如果css边框衔接部分采用的是直直的衔接方式的话是永远画不出来三角型滴!
css三角形的画法
一般来说,画一个任意的三角形需要指定三个方向的border(特殊的三角形,例如上面画的直角三角形只需要两个方向的border)
画的时候知道三角形距离三个方向的距离就能画出三角形来,
border-right:30px solid transparent
比如这个语句意思就是三角形的定点距离最右侧的距离是30px
然后知道哪个方向该填充颜色,哪个方向该透明就可以啦
举一个具体的例子:
画一个边长为50px的等边三角形,三角形的尖尖朝向右侧:
顶点距离上方距离:25px
顶点距离下方距离: 25px
定点距离左侧距离(三角形的高):25px≈43px
然后给div添加这样的样式就可以啦