摘要:而且如果上面没有块元素的时候,是从内联元素的内容开始算起的,所以上面的就会到浏览器可视区域的上面。
目录
简介
优点
原理
1. 先创建一个div
2. 然后给div设定边框。
3. 给div的四个边框都设置不同的颜色
4. 把宽度和高度都变成0
5. 其余角为透明
6. 兼容IE6浏览器
造成这样的原因是:
最简单的解决办法:(后面添加)
其他的解决办法:
7. 解决内联元素的三角显示问题
为什么会有这个问题
解决办法
1. 去掉固定的内容高度
2. 将内联元素转化为块级元素或者行内块元素
3. 将元素脱标(如果涉及特殊的布局可以直接使用)
最终代码
扩展
有角度的三角
有一个角是直角的三角
箭头
对话框
兼容IE8的小圆角矩形
利用css3旋转来制作三角形
简介三角的做法有好几种:
图片、精灵图(网易)
字体图标(京东)
纯代码写(亚马逊)
这里主要介绍的纯代码写的。
优点代码写的三角,不管大小是多少,是不失真的。
代码运行比图片更快。
如果项目中没有引用字体图标,代码写是比较可靠的。
原理原理就是使用css的盒模型中的border属性1. 先创建一个div
使用border属性就可以实现一个兼容性很好的三角图形效果,其底层受到border-style的inseet/outset影响,边框3D效果在互联网早期还是很流行的,。
2. 然后给div设定边框。
div{ width:200px; height:100px; border:10px solid red; }
可以看到效果:
3. 给div的四个边框都设置不同的颜色div{ width:200px; height:100px; border-left:10px solid red; border-top:10px solid green; border-right:10px solid blue; border-bottom:10px solid yellow; }
可以看到以下效果:
可以看到两个border交叉的地方,有斜边存在。
4. 把宽度和高度都变成0div{ width:0px; height:0px; border-left:10px solid red; border-top:10px solid green; border-right:10px solid blue; border-bottom:10px solid yellow; } /*也可以这么写*/ div{ width:0px; height:0px; border:10px solid; border-color:red green blue yellow; }
可以看到以下效果:
这个时候就看得很明显了,出现了四个三角。那如果要出现一个,那么就将其他的三个弄成透明色就可以了。
这个就是三角形的由来。
5. 其余角为透明这里的设置也遵循 上右下左 的顺序,把不需要的角弄成透明色。
div{ width:0px; height:0px; border-width:10px; border-color:#f00 transparent transparent transparent; border-style:solid; } /*也可以再进行合并*/ div{ width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent; }
这样一个三角就完成了。
那么问题来了,那就是兼容问题,IE6的兼容问题,如果不要求兼容IE6可以忽略下一步。
同样的一个三角,在IE6的显示是什么呢?
造成这样的原因是:IE6不支持border的transparent
IE6的高度最小为19px,不支持高度为0
在IE6下面,如果想把元素例如div设置成19像素以下的高度就设置不了了。这是因为IE6浏览器里面有个默认的高度,IE6下这个问题是因为默认的行高造成的。最简单的解决办法:(后面添加)
div{ /*不支持transparent*/ border-style:solid dashed dashed dashed; /*高度最小不为0*/ overflow:hidden; }其他的解决办法:
查了查网上的,如果是IE6不支持transparent,
可以这么做:
div{ border:solid 1px transparent; _border-color:tomato; _filter:chroma(color=tomato); }
所以我觉得用在这里也可以,BUT没有亲测过,如果哪位小可爱测过可以请告知我^ ^。
div{ width:0px; height:0px; margin:100px auto; border-width:10px; border-style:solid; border-color:#f00 transparent transparent transparent; _border-color:#f00 tomato tomato tomato; _filter:chroma(color=tomato); }
如果是解决IE6的高度问题(也可以前面加下划线,表示兼容的IE6)
div{ height:0; font-size:0; line-height:0; overflow:hidden; }7. 解决内联元素的三角显示问题 为什么会有这个问题
因为我们刚才用 可以看到页面是这个样子的: 为什么是这个样子的,那么我们再看的仔细一点。 造成这样的原因 是因为行内元素自己有固定的高度,不能设置宽高为0,所以上面下面都是50px没有问题,但是中间撑开了距离,也就有了梯形的效果。 而且如果上面没有块元素的时候,是从内联元素的内容开始算起的,所以上面的border就会到浏览器可视区域的上面。 这个有很多的办法: 使用font-size:0;可以去掉内容的固定高度。 下面就是兼容了IE6版本的三角代码。 改变border-width,三角变大,是不失真的。很清晰。 ==三角制作完成。== 上面制作的都是45度的三角,三角可以通过border的高度宽度确定角度。 比如这样一个三角,只需要确定上下的和左右的宽度不一样即可。 观察可以看到,是上面和右面的三角同时设置成一个颜色。就会出现直角的三角。 其实原理也简单,就是两个三角重叠在一起。上面的三角就是背景的颜色 这个使用伪元素去做就很方便。 原理就是一个矩形,上面和下面使用伪元素设置。 before是方向朝上的梯形,after是方向朝下的梯形。 注意不要太宽了,否则会变成切边矩形,这样就可以避免border-radius的兼容问题 如果可以用到css3,也可以使用到transform的rotate属性 大概原理图就是: 最终效果图是: @version1.0——2018-11-8——创建《CSS三角的写法(兼容IE6)》 ©burning_韵七七 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/114184.html
下面的代码:
它实际是这个样子的。
解决办法
1. 去掉固定的内容高度
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
font-size: 0;
}
2. 将内联元素转化为块级元素或者行内块元素
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
display: block; /*也可以是inline-block*/
}
3. 将元素脱标(如果涉及特殊的布局可以直接使用)
/*脱标*/
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
position: absolute;
top:0;
left:0;
}
/*or 浮动*/
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
float:left;
}
最终代码
div{
width:0px; /*设置宽高为0*/
height:0px;/*可不写*/
border-width:10px; /*数值控制三角的大小,垂直的位置*/
border-color:#f00 transparent transparent transparent;/*上右下左,transparent是透明的*/
border-style:solid dashed dashed dashed;/*设置边框样式,dashed是兼容IE6写的*/
overflow:hidden;/*兼容IE6最小高度不为0写的*/
}
div{
width: 0px;
height: 0px;
margin: 100px auto;
border-width:10px 30px;
border-color:transparent transparent transparent red;
border-style:solid;
}
有一个角是直角的三角
div{
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: red red transparent transparent;
}
箭头
对话框
兼容IE8的小圆角矩形
利用css3旋转来制作三角形
将里面的旋转45度,外面的overflow:hidden即可
摘要:而且如果上面没有块元素的时候,是从内联元素的内容开始算起的,所以上面的就会到浏览器可视区域的上面。 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是: 最简单的解决办法:(后面添加) 其他的解决办法: 7. 解决...
摘要:而且如果上面没有块元素的时候,是从内联元素的内容开始算起的,所以上面的就会到浏览器可视区域的上面。 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是: 最简单的解决办法:(后面添加) 其他的解决办法: 7. 解决...
摘要:参考了天猫微博等网站的做法,用纯和实现,效果还是不错的。宋体三角形圆形提示盒子用做的提示盒子,上三角是纯,盒子圆角用到用做的提示盒子,上三角是纯,盒子圆角用到 参考了天猫、微博等网站的做法,用纯html和css实现,效果还是不错的。 以下是成果,兼容主流浏览器,包括ie6。 showImg(http://dtop.powereasy.net/UploadFiles/Article/2...
摘要:基本原理大同小异,这里主要介绍利用当然还可以使用的旋转技术实现,由于兼容性问题这里不涉及了。利用是一种常用而且简单兼容的方式 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的吹毛求疵,越来越多的前端开发者开始返璞归真,在能不使用图片的场景中减少图片使用,css图标相对于图片...
阅读 828·2019-08-30 15:55
阅读 1409·2019-08-30 13:55
阅读 1986·2019-08-29 17:13
阅读 2841·2019-08-29 15:42
阅读 1332·2019-08-26 14:04
阅读 1017·2019-08-26 13:31
阅读 3273·2019-08-26 11:34
阅读 830·2019-08-23 18:25