原理就是: div 的边框与边框之间的衔接方式是斜角衔接的(注意把width和height都设置为0)
思路:既然是用border做,就得比较粗的才能显示效果,设置div的 height、width为0px,上下左右的border为不同颜色,100px,即
div{
height:0px;
width:0px;
border-top:100px blue solid;
border-right:100px red solid;
border-bottom:100px green solid;
border-left:100px gray solid;
}
显示如右图效果。
从右图我们可以看到,2个border重叠时,会以45°平分,各显示一半,这样我们如果设上、下、左的边框为白色时,会出现一个红色的三角形。但其实代码可以更简单。
div{
width:0px;
border-top:100px red solid;
border-left:100px white solid;
}
使div的上面(下面)的border为红色,100px实线显示,而左边(右边)用白色与其平分,同时用width:opx控制它们的显示宽度,这样就形成了我们要做的三角形。如下图。
拓展:前天有个用div做十字的题目,用这个三角形的办法再加负margin的方法也得以实现。
html部分:<div class="a1"> </div><div class="a2"> </div><div class="a3"> </div><div class="a4"> </div> (就是写4个div)
css部分:
.a1{
height:50px;
width:50px;
border-top:30px white solid;
border-right:30px red solid;
border-bottom:30px red solid;
border-left:30px white solid;
}
.a2{
height:50px;
width:50px;
border-top:30px white solid;
border-right:30px white solid;
border-bottom:30px red solid;
border-left:30px red solid;
margin:-110px 0 0 110px;
}
.a3{
height:50px;
width:50px;
border-top:30px red solid;
border-right:30px red solid;
border-bottom:30px white solid;
border-left:30px white solid;
}
.a4{
height:50px;
width:50px;
border-top:30px red solid;
border-right:30px white solid;
border-bottom:30px white solid;
border-left:30px red solid;
margin:-110px 0 0 110px;
}
用border形成其中4分之一的图像,用负margin控制位置,最后拼成全图。
例子1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#test4 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}
#test5 {
width:0;
height:0;
overflow:hidden;
border-color:red green green red;
border-width:40px;
border-style:solid
}
</style>
</head>
<body>
<div id="test4"></div>
<div id="test5"></div>
</body>
</html>
但是,IE6不支持transparent
IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果~ 具体原因可以见下面“其他小问题”
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px; }
当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.
// ie6/ie7显示不对的时候,加上overflow:hidden;zoom:1
其他小问题
-
- 透明:
- IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3),虚线宽长度必须是其宽度的5倍以上(height>=border-width*5),否则点线和虚线都不会出现. - IE6的奇偶bug:
- 如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值. - IE6的空div高度bug:
- IE6下,空div会有莫名的高度,也就是说height:0;不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的.可使用font-size:0; + overflow:hidden;修复此问题. - filter: chroma滤镜
- 该属性属性可以设置一个对象中指定的颜色为透明色, 如:
-
border-color: pink; filter: chroma(color=pink);