CSS如何画出一个三角形




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

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

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


所以我们如果把上、左、右三条边隐藏掉(颜色设为 transparent),会怎样呢?



呐,这就是个梯形了!感觉离革命胜利很近了是不是!
仔细观察一下这个梯形,和三角形有神马区别呢?
对!上面多了一条边!
上面这条边有什么特点呢?

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

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




三角形粗来了!!!!!!!

好像太小了点,怎么把它放大捏?

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


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

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



就是个直角三角形了~

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

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

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

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


所以我们如果把上、左、右三条边隐藏掉(颜色设为 transparent),会怎样呢?



呐,这就是个梯形了!感觉离革命胜利很近了是不是!
仔细观察一下这个梯形,和三角形有神马区别呢?
对!上面多了一条边!
上面这条边有什么特点呢?

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

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




三角形粗来了!!!!!!!

好像太小了点,怎么把它放大捏?

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


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

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



就是个直角三角形了~

利用相邻的两个三角形还可以拼出钝角三角形~
阅读更多
换一批

没有更多推荐了,返回首页