CSS三角形图解

原创 谢雨轩 教程 CSS3动画 1554阅读 2017-06-27 12:06:31 举报

每次用css画三角,总是不甚所知,改起来也总是蜜汁艰难。其实画三角很简单

首先说,三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~!

html 代码

原来每个边,形成了三角形。 之前一直很奇怪,为什么每次width 和 height 都是0px? 我想原因已经不言而喻。 当然我们应该试一下看看 ~

html 代码

 我们看到了三角,却拿不到三角? 很简单,我们知道border-color 值对应的边分别为 top 、right、bottom、left ;现在我们不想要那个,就把那个边透明

html 代码

当然我们要的三角通常不是这样的,现在,我们只要让border-color和border-width搭配,就可以变换各种三角

html 代码

至于正三角、不规则三角等,只要知道它的原理,都是很可以画出来的
html 代码

评论 ( 1 )
最新评论