css三角形滴原理
2016-10-25 22:51
211 查看
肿么用css画一个如下图滴三角形
相信很多同学都知道,下面这段代码阔以实现
但素,大部分人不知道为虾米上面这段代码可以画出一个三角形
下面偶们图文并茂的来看一下
首先呢,下面是一个盒模型,padding和margin都视为0,border假设是10px
首先,我们把border-top设为0,得到下图
然后吧width设为0,中间内容的宽度就没了,只剩高,如下图
然后再把height设为0
然后把左右的border设为transparent,得到最终的三角形
相信很多同学都知道,下面这段代码阔以实现
1 2 3 4 5 6 7 | #triangle-up { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid red; } |
下面偶们图文并茂的来看一下
首先呢,下面是一个盒模型,padding和margin都视为0,border假设是10px
首先,我们把border-top设为0,得到下图
然后吧width设为0,中间内容的宽度就没了,只剩高,如下图
然后再把height设为0
然后把左右的border设为transparent,得到最终的三角形
相关文章推荐
- CSS实现三角形图标的原理!!!!今天总算弄懂了。
- CSS:纯CSS绘制三角形(原理)
- HTML之CSS画三角形原理
- 笔记 纯css绘制三角形原理动态演示链接地址
- HTML+CSS写一个三角形(原理+实例)
- CSS绘制三角形的原理剖析
- 经典CSS实现三角形图标原理解析
- css三角形的实现原理
- CSS 绘制三角形原理演示(动画)
- 用纯CSS创建一个三角形的原理是什么?
- CSS-三角形及其原理..........
- css绘制三角形原理
- CSS绘制三角形的原理剖析
- 终于搞懂了CSS实现三角形图标的原理
- CSS实现三角形图标原理解析
- 经典CSS实现三角形图标原理解析
- 纯CSS制作三角形的原理
- 经典CSS实现三角形图标原理解析
- HTML+CSS写三角形原理
- css 实现三角形的原理