有谁能详细讲一下css如何画出一个三角形_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 1:15:35 共计：3602 浏览

有谁能详细讲一下css如何画出一个三角形？

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

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

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

所以我们如果把上、左、右三条边隐藏掉（颜色设为 transparent），会怎样呢？呐，这就是个梯形了！感觉离革命胜利很近了是不是！仔细观察一下这个梯形，和三角形有神马区别呢？对！上面多了一条边！上面这条边有什么特点呢？

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

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

三角形粗来了！！！！！！！

好像太小了点，怎么把它放大捏？

很简单，我们把 border 的宽度扩大，怎么扩大呢？显然这条底边和上边已经没什么关系了，上边唯一的作用就是影响三角形顶点到 div 上边缘的距离。所以我们只需要扩大左、下、右这三条边。

下边的 width 控制了三角形的高（150px）左右两边的 width 分别控制了三角形的底边长的两部分（加起来共 200px）

再举个例子，如果把右边 width 设为 0

就是个直角三角形了~

利用相邻的两个三角形还可以拼出钝角三角形~

实现的方法还有很多，具体看你用哪种！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。