下面介绍CSS画三角形的原理
一、首先画一个div,给它宽高和背景颜色。再加上四条边的边框。
![](https://img.haomeiwen.com/i5061728/b30b8e53d192eb0d.png)
![](https://img.haomeiwen.com/i5061728/d2aa47787ef68469.png)
二、div的width、height置零,看看效果。(注意,这里把div的背景颜色也去掉。因为背景颜色是扩展到边框的,如果不去掉背景颜色,那么下面背景颜色会显示在透明的边框上。)
![](https://img.haomeiwen.com/i5061728/64ce19dc82e49020.png)
![](https://img.haomeiwen.com/i5061728/2d05d132f8054b1d.png)
三、下面把左、右边框变成透明
![](https://img.haomeiwen.com/i5061728/5fb62e5858e9c8cd.png)
![](https://img.haomeiwen.com/i5061728/d4504cc8400f2e7b.png)
四、去掉下边框。下面是等腰三角形
![](https://img.haomeiwen.com/i5061728/04510109f6aca716.png)
![](https://img.haomeiwen.com/i5061728/b6667da1c0478122.png)
CSS三角形原理是:元素高度宽度为0,且没有下边框,左右边框透明即可。
要想画直角三角形。直接去掉右边框即可。
![](https://img.haomeiwen.com/i5061728/af979bfb25970d88.png)
![](https://img.haomeiwen.com/i5061728/c730f2a6c566dd74.png)
参考文献:
https://www.zhihu.com/question/35180018
网友评论