纯css画三角形

三角形画法原理参照:知乎:css如何画出一个三角形

首先画一个正方形,给他加上大点的边框,我们分析一下边框(请自动忽略图片里的10,并改为40)


纯css画三角形_第1张图片
三角形.png

纯css画三角形_第2张图片
三角形2.png

当高特别小时,左右边框就快成为三角形了。当高为0时,就是三角形了

 

当宽高都为0时


纯css画三角形_第3张图片
三角形3.png

当改变一个三角形的属性时,将颜色改为transparent(透明的),这个三角形就透明了

    
纯css画三角形_第4张图片
透明.png

所以,我们想要一个三角形,就将其他边的边框变为transparent

    
纯css画三角形_第5张图片
左三角.png

你可能感兴趣的:(纯css画三角形)