Loading... 先贴一段代码 width: 0; height: 0; border-left: 100px solid yellow; border-right: 100px solid green; border-bottom: 100px solid red; border-top: 100px solid blue; 效果图: ![微信图片_20190530165841.png][1] ---------- ## 问题一:假如去掉一个边呢?(剩下三条) ## width: 0; height: 0; border-left: 100px solid yellow; border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; 效果图: ![微信图片_20190530170035.png][2] 由图可知我们去掉了border-top 实际效果中上边的边框消失了。 ## 问题二:那我再去掉一条边呢?(剩下两条) ## width: 0; height: 0; border-left: 100px solid yellow; border-right: 100px solid green; //border-bottom: 100px solid red; //border-top: 100px solid blue; 效果: **无图形出现** width: 0; height: 0; border-left: 100px solid yellow; border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; ### 这次换左边 ### width: 0; height: 0; //border-left: 100px solid yellow; border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; 效果: ![微信图片_20190530170457.png][3] ### 右边 ### <div class="tip inlineBlock info"> 结论:必须两条不对成的边有宽度(长度)图形才会出现 </div> <div class="tip inlineBlock error"> 上下、左右均不会出现图形,理解也很简单,一个没有高度,一个没有高度 </div> width: 0; height: 0; border-left: 100px solid yellow; //border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; 效果: ![微信图片_20190530170614.png][4] ## 问题三: 那我再去掉一条边呢? ## width: 0; height: 0; //border-left: 100px solid yellow; //border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; 效果:**无图形出现** ## 问题四: 边的长度决定了什么? ## ### 这次我们把下边长度变为200px ### width: 0; height: 0; border-left: 100px solid yellow; border-right: 100px solid green; border-bottom: 200px solid red; //border-top: 100px solid blue; 效果:图形的高变成了200**或者说从中心点到下边的距离变为了200px** ![微信图片_20190530171016.png][5] ---------- ### 继续这次把左边宽度变为200px ### width: 0; height: 0; border-left: 200px solid yellow; border-right: 100px solid green; border-bottom: 100px solid red; //border-top: 100px solid blue; 效果: **图形中心点到左边距变为了200px** ![微信图片_20190530171245.png][6] ## 问题四:我只想要一个三角形怎么办? ## width: 0; height: 0; border-left: 200px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid red; //border-top: 100px solid blue; 那我把另外两条边的颜色变为透明不就好了吗: `transparent` 效果: ![微信图片_20190530171645.png][7] ## 结论 ## 理解边距是从中心点到边的距离,就可以做出自己想要的图形了,配合透明色`transparent`与定位,就可以配合其他图形做出各种不规则的图形了! [1]: http://www.godlike.top/usr/uploads/2019/05/4164909998.png [2]: http://www.godlike.top/usr/uploads/2019/05/2301484537.png [3]: http://www.godlike.top/usr/uploads/2019/05/1471552363.png [4]: http://www.godlike.top/usr/uploads/2019/05/3693592866.png [5]: http://www.godlike.top/usr/uploads/2019/05/522475426.png [6]: http://www.godlike.top/usr/uploads/2019/05/3655543417.png [7]: http://www.godlike.top/usr/uploads/2019/05/1955702717.png Last modification:August 26, 2019 © Allow specification reprint Support Appreciate the author AliPayWeChat 赞 0 如果觉得文章对你有所收获,可以请笔者喝杯咖啡