.triangleTest{.contentdiv{宽度：0;高度：0；&.up{border-left:50pxsolidtransparentborder-right:50pxsolidtransparent;border-bottom:100px纯红色；边界顶部：0；为什么会这样显示。#box{宽度：200px;高度：200px；背景：黄色；border-top：80px纯红色；右边框：80px纯黑色；border-bottom:80px纯绿色；左边框：80px纯蓝色；盒子的宽和高都是200px，边框都是80px。由于边框颜色不同，可以明显看出内容区域（黄色区域）呈梯形覆盖。如果长宽小于最大边框，内容区域是不可见的（黄色区域），也就是说当框的长宽小于160px（80+80）时，会显示为4三角形。我们回到第一个例子来解释为什么是三角形，因为左右边框是透明不可见的，所以只能看到底边框形成的向上的三角形。根据以上原理，我们可以实现很多种三角形和梯形。.left{border-left:50px纯红色;border-top：50px纯红色；border-right:50pxsolidtransparent;border-bottom:50pxsolidtransparent;:50px实心透明;右边框：50px纯红色；border-bottom:50px实心红色；}.bottom-left{宽度：120px；高度：120px；-top:50px实心透明；border-right:50pxsolidtransparent;border-bottom:50px实心红色；}可以看出，理解了边框实现三角形的原理后，就可以画出各种图形了。在线体验地址所有源码都可以在我的仓库地址找到：下载个人博客：访问学习如逆水行舟，不进则退。前端技术发展迅速。如果你不每天坚持学习，你将无法跟上。我会陪大家，坚持每天推送博文，和大家一起进步。希望大家可以关注我，尽快收到最新的文章。公众号: