纯css实现三角形原理

.triangle{width:100px;高度：100px；border-top:10pxsolid#000;border-right:10pxsolid#ff0000;border-left:10pxsolid#00ff00;border-bottom:10pxsolid#0000ff;}作用：此时需要注意四个边框的交集，后面会用到。然后删除内容的宽度和高度。为了观察方便，将四个边框设置得大一些。效果如下：.triangle{width:0;高度：0；border-top:100pxsolid#000;border-right:100pxsolid#ff0000;border-left:100pxsolid#00ff00;border-bottom:100pxsolid#0000ff;}现在是不是觉得这个三角形有点简陋，有四个方向，其他方向的颜色你要设置哪一个透明还是不透明，先试试向下的三角形:.triangle{宽度：0;高度：0；border-top:100pxsolid#000;border-right:100pxsolidtransparent;左边框：100px实心透明；border-bottom:100pxsolidtransparent;}好像就是这个方法。当然bottomborder目前没有用到，会让总高度变高，直接去掉即可。是不是可以这样理解，底边在哪里，剩下哪边的颜色？那么还有一个问题，就是这个三角形的宽和高。仔细看，这个三角形的宽度正好是左右边框之和，也就是200px，它的高度当然就是上边框的宽度，也就是100px。以此类推，如果设计稿给出了一个长50px，高60px的向上三角形，那么应该这样写：.triangle{width:0;高度：0；border-top:60pxsolid#000;border-right:25px实心透明；border-left:25pxsolidtransparent;}直角三角形也可以实现：.triangle{width:0;高度：0；border-top:100pxsolid#000;border-left:100pxsolidtransparent;}还有其他各种角度的直角三角形，宽高可以自定义。例如，制作一个长为50，高为60的直角三角形：.triangle{width:0;高度：0；border-top:60pxsolid#000;border-right:50pxsolidtransparent;}bottomedge是top，所以border-top设置颜色，它的width是height，所以width设置为60，bottomedge的长度需要拉伸由右边框（因为左边是直角，表示没有其他边框与之重合），所以设置右边框，宽度为三角形的长度，为50。总结：普通三角形：哪个方向是底边，设置那个方向的颜色值，直接去掉对边，然后左右（上下）边的宽度之和就是三角形底边的长度，其自己的宽度就是三角形的高度。直角三角形：只需要两条边框，可以先把它填成一个正方形的行，然后留底边作为颜色值，留补三角形的边。有问题欢迎指正~