`
小小猪馁
  • 浏览: 18931 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

原理就是: div 的边框与边框之间的衔接方式是斜角衔接的(注意把width和height都设置为0)

思路：既然是用border做，就得比较粗的才能显示效果，设置div的 height、width为0px，上下左右的border为不同颜色，100px，即

div{
height:0px; border做三角形学习笔记
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 class="a1"> </div><div class="a2"> </div><div class="a3"> </div><div class="a4"> </div> （就是写4个div）

css部分：

.a1{
height:50px; border做三角形学习笔记
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);

 

分享到：
| HTML5 中 div section article 的区别
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics