CSS绘制图形

增大border的值时

从上图可以很明显的发现每一边的边框是梯形。

现在我们把元素的长和宽都设置为0px,边框的值不变,每一边的边框将会由梯形变成三角形。

那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。

现在把左右两边的border-color不设置为transparent,看看是怎么样的图形。

原来当不设置下边框时,左右的边框会把下半部分切掉。

我们只设置上右的边框,得到如下结果:

似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。

原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。

如果只设置元素对边的两条边框,看看会出现什么情况。

浏览器什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.

最后来看一个应用的例子:

效果如下:

CSS绘制图形

它实现的原理很简单,就是两个三角形的叠加。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: