CSS画三角形

学会了使用CSS画三角形

思路：

　　先构建一个border比较粗的div，并且将上下左右border赋予不同颜色，可以得到如下效果

　　　　　　　　　　　　    

 

 

　　将width、height设为0就可以得到一个只由border构成的正方形

　　　　　　　　　　　          

 

 　 根据需求，调整某个border的width,这里的width相当于数学上的三角形的高，这里选择取黄色三角形的一半。

     我们需要将border-left-width设置为0，也就是把橘色三角形的高设置为0，效果如下:

　　

　 　　　　　　　　　　

　　现在，我们只需要把需求之外三角形颜色设为透明：border-color-transparent

　　　　　　　　　　

 

 　　简化css

　　　　　　　　　　

 

 　　在熟悉套路之后，可以根据需要自由发挥，做出不同样式的三角形