【前端：css画三角形】

      网上也有各种各样用CSS样式来写三角形的文章，但个人觉的有些乱，本来可能就不明白如何写，可能看完之后和没看是没什么区别的。因此本人在这里写好了方法，希望可以帮助的刚入门的前端工作者

 

.box{
            width: 0;
            height: 0;
            border: 10px solid transparent ; /*由边框的宽带觉得三角的大小,注意边框颜色一定是要transparent透明的*/
            border-top-color: yellow; /*由该命令决定三角形的指向和颜色*/
        }

 

首先给大家看到的就是用CSS画一个三角形，我在这里推荐的这种方法是最容易理解的，并且在项目中也是可以正常使用的。

原理： 用CSS画三角形主要是利用了边框属性。

1.首先要设置一个宽高为0的盒子.

2.利用border属性来设置边框，三角形的大小就取决于边框的大小，四个方向的边框线都是solid实线，并且要先让四个边框都是transparent透明的。

3通过border-top-color同时确定三角形的指向和颜色。