Open lulujianglab opened 6 years ago
先看下border的表现形式
#box{ width:100px; height:100px; background:yellow; border-top: 20px solid red; border-right:20px solid black; border-bottom:20px solid green; border-left:20px solid blue; }
可以发现,border表现为梯形
所以,当我们减少box的宽高,一直降到0时,border就变成了三角形
所以我们就可以通过将元素宽高设置为0,而通过控制border来得到想要的三角形了
只需要将不需要方向的border设置为透明(transparent),就可以用来实现三角形了
比如想实现下三角形,就将border-left,border-bottom,border-right设置为transparent即可
#box{ width:0px; height:0px; border-top: 20px solid red; border-right:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid transparent; }
实现梯形也就简单了,比如
#box{ width:100px; height:100px; border-top: 60px solid red; border-right:20px solid transparent; border-bottom:0px solid transparent; border-left:20px solid transparent; }
总而言之,通过调整border的大小和颜色/透明,就可以获得各种三角形和梯形了
那如果实现是带边框的三角形呢?如果是一个正方形,我们写边时,会用到边框
但这里的三角形本身就是border,不可能再给border添加border属性了,所以得用其他方法
比如叠加层,思路就是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象
html: <!-- 向上的三角形 --> <div class="triangle_border_up"> <span></span> </div> css: /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ margin:40px auto; position:relative; } .triangle_border_up span{ display:block; width:0; height:0; border-width:0 28px 28px; border-style:solid; border-color:transparent transparent #fc0;/*透明 透明 黄*/ position:absolute; top:0px; left:0px; }
但是并不是预想的这样
原因是,我们看到的三角形是边,而不是真的具有内容的区域,绝对定位(position:absolute),是根据相对定位父层内容的边界计算的
这个空的div,content的位置在中心,所以内部三角形是根据中心这个点来定位的
添加阴影可以看到
所以,内部的三角形都是根据外部三角形实际内容的点来定位的,而非我们肉眼看到的三角形的边界定位
将上述span的
top:0px; left:0px;
改为
top:1px; left:-28px;
就阔以了!
原理
先看下border的表现形式
可以发现,border表现为梯形
所以,当我们减少box的宽高,一直降到0时,border就变成了三角形
所以我们就可以通过将元素宽高设置为0,而通过控制border来得到想要的三角形了
实现
只需要将不需要方向的border设置为透明(transparent),就可以用来实现三角形了
比如想实现下三角形,就将border-left,border-bottom,border-right设置为transparent即可
实现梯形也就简单了,比如
总而言之,通过调整border的大小和颜色/透明,就可以获得各种三角形和梯形了
那如果实现是带边框的三角形呢?如果是一个正方形,我们写边时,会用到边框
但这里的三角形本身就是border,不可能再给border添加border属性了,所以得用其他方法
比如叠加层,思路就是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象
实现
效果
但是并不是预想的这样
原因是,我们看到的三角形是边,而不是真的具有内容的区域,绝对定位(position:absolute),是根据相对定位父层内容的边界计算的
这个空的div,content的位置在中心,所以内部三角形是根据中心这个点来定位的
添加阴影可以看到
所以,内部的三角形都是根据外部三角形实际内容的点来定位的,而非我们肉眼看到的三角形的边界定位
将上述span的
改为
就阔以了!