css3制作三角形的原理

　利用CSS的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。

要理解这里的width和height是指内容的width和height。而不是指盒子模型的width和height。

作者：Vkki
链接：https://www.zhihu.com/question/35180018/answer/61554144
来源：知乎
著作权归作者所有，转载请联系作者获得授权。


这是一个普通的 div ，一个边长为 100px 的正方形，border 宽度为 10px， 没有任何技术含量，地球人都会画。

我们知道 border 是分为 top、right、bottom、left 的，那么这个矩形的四个边是怎样划分的呢？

显然，要想公平地分割四条边框，只有这样：

<img src="https://i-blog.csdnimg.cn/blog_migrate/3b91da57156c44608d8e6679c0966aea.png" data-rawwidth="356" data-rawheight="352" class="content_image" width="356">
所以我们如果把上、左、右三条边隐藏掉（颜色设为 transparent），会怎样呢？

<img src="https://i-blog.csdnimg.cn/blog_migrate/9e18a58c73455ec65de6865987157e39.png" data-rawwidth="212" data-rawheight="69" class="content_image" width="212">
<img src="https://i-blog.csdnimg.cn/blog_migrate/db866a8f09d04b5f8ebdd5c379ef264d.png" data-rawwidth="164" data-rawheight="140" class="content_image" width="164">
呐，这就是个梯形了！感觉离革命胜利很近了是不是！
仔细观察一下这个梯形，和三角形有神马区别呢？
对！上面多了一条边！
上面这条边有什么特点呢？

它的长度刚好等于 div 的宽度！

所以我们要把这个 div 的宽度缩小！
多小合适呢？
当然是 0 啦！

<img src="https://i-blog.csdnimg.cn/blog_migrate/fff8a31f2a56ab1cddf2e54a581c49f3.png" data-rawwidth="218" data-rawheight="78" class="content_image" width="218">

<img src="https://i-blog.csdnimg.cn/blog_migrate/36f51b5dc77e5c5dd1c71c840b89dd17.png" data-rawwidth="152" data-rawheight="141" class="content_image" width="152">

1. #triangle-topright {  
2.     width: 0;
3.     height: 0;
4.     border-top: 100px solid red;
5.     border-left: 100px solid transparent;
6. }