本文介绍: 最近在做一个官网项目的时候,UI小姐姐设计了一些特殊图形,例如三角形,虽然element-ui是带有相应模板的,但是设计的和模版的不一样,因此研究了一下。三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了。当然我们要的三角通常不是这样的,现在,我们只要让border-color和border-width搭配,就可以变换各种三角。至于正三角、不规则三角等,只要知道它的原理,都是可以画出来的。我们看到了三角,却拿不到三角?
问题背景
最近在做一个官网项目的时候,UI小姐姐设计了一些特殊图形,例如三角形,虽然element-ui是带有相应模板的,但是设计的和模版的不一样,因此研究了一下。
三角形怎么画
三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了
原来border每个边,形成了三角形。 之前一直很奇怪,为什么每次width 和 height 都是0px
我想原因已经不言而喻,当然我们应该试一下看看。
可以给加上padding:50px;中间的白色区域就是100px
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。