border干三角形学习笔记（转）

2012-06-28

border做三角形学习笔记（转）原理就是: div 的边框与边框之间的衔接方式是斜角衔接的(注意把width和height

border做三角形学习笔记（转）

原理就是: 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控制它们的显示宽度，这样就形成了我们要做的三角形。如下图。

border干三角形学习笔记（转）

拓展：前天有个用div做十字的题目，用这个三角形的办法再加负margin的方法也得以实现。

html部分：<div alt="border干三角形学习笔记（转）" src="http://s15.sinaimg.cn/bmiddle/8f750931taf9e2264a27e&690">
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>

但是，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);

热点排行

Web前端

border干三角形学习笔记（转）