利用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">
链接:https://www.zhihu.com/question/35180018/answer/61554144
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
![](https://i-blog.csdnimg.cn/blog_migrate/b4f0999f3eed88e62d85a5615a9b40eb.png)
这是一个普通的 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">
![](https://i-blog.csdnimg.cn/blog_migrate/3b91da57156c44608d8e6679c0966aea.png)
所以我们如果把上、左、右三条边隐藏掉(颜色设为 transparent),会怎样呢?
<img src="https://i-blog.csdnimg.cn/blog_migrate/9e18a58c73455ec65de6865987157e39.png" data-rawwidth="212" data-rawheight="69" class="content_image" width="212">
![](https://i-blog.csdnimg.cn/blog_migrate/9e18a58c73455ec65de6865987157e39.png)
<img src="https://i-blog.csdnimg.cn/blog_migrate/db866a8f09d04b5f8ebdd5c379ef264d.png" data-rawwidth="164" data-rawheight="140" class="content_image" width="164">
![](https://i-blog.csdnimg.cn/blog_migrate/db866a8f09d04b5f8ebdd5c379ef264d.png)
呐,这就是个梯形了!感觉离革命胜利很近了是不是!
仔细观察一下这个梯形,和三角形有神马区别呢?
对!上面多了一条边!
上面这条边有什么特点呢?
它的长度刚好等于 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">
![](https://i-blog.csdnimg.cn/blog_migrate/fff8a31f2a56ab1cddf2e54a581c49f3.png)
<img src="https://i-blog.csdnimg.cn/blog_migrate/36f51b5dc77e5c5dd1c71c840b89dd17.png" data-rawwidth="152" data-rawheight="141" class="content_image" width="152">
![](https://i-blog.csdnimg.cn/blog_migrate/36f51b5dc77e5c5dd1c71c840b89dd17.png)
- #triangle-topright {
- width: 0;
- height: 0;
- border-top: 100px solid red;
- border-left: 100px solid transparent;
- }