话说，山顶角就是下图中你无视美女图片、无视那些含有YY倾向的文字所剩下的那个角角。
（图片来自人人网）
不过人人网的这个山顶角是一张小图片：
很小的一张图片并且想必也不会经常去修改这个图片吧，不过不知道人人网为什么没有使用CSS Spirit技术（同是这个页面，有好几处采用了CSS Spirit技术）；也不管它是为什么了，现在说说使用纯CSS怎么实现那个角角了。
一、边框
上图的那个山顶角就是通过边框的方法实现的，有点粗糙，大家凑合这看吧…
看一段TEST CODE：
- <!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>Border</title>
- <style type="text/css">
- div
- {
- width:50px;
- border-width:10px;
- border-style:solid;
- border-color:#666 #F00 #0F0 #FF0;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
截图如下：
为了使IE6和IE8的样式表现一样我们将CSS样式作如下修改：
- div
- {
- height:0px;
- width:50px;
- border-width:10px;
- border-style:solid;
- border-color:#666 #F00 #0F0 #FF0;
- overflow:hidden;
- }
这样IE6就与IE8表现一样了，试想：如果去掉另三边的边框会得到一个小三角或者是一个小梯形吗？
测试直接将另外三边的边框设为none是无效的，这里就不截图了，请自行修改代码测试。
于是乎，想到一个取巧的方法：
- div
- {
- height:0px;
- width:0px;
- border-width:10px;
- border-style:solid;
- border-color:#666 #FFF #FFF #FFF;
- overflow:hidden;
- }
对，就是将另外的边框的颜色设置为与背景一样，这样是可以达到目的，但又有问题了，如果背景是图片呢？
这个问题很是困扰了我一段时间，某日在一QQ群里找到了解决的方法，即将他们的样式设为dashed，颜色设为transparent。
- div
- {
- height:0px;
- width:0px;
- border-width:10px;
- border-style:solid dotted dashed dashed;
- border-color:#666 transparent transparent transparent;
- overflow:hidden;
- }
我们稍作延伸，比如这样：
- div
- {
- height:0px;
- width:0px;
- border-width:10px;
- border-style:solid solid dashed dashed;
- border-color:#666 #666 transparent transparent;
- overflow:hidden;
- }
再，像这样的又该怎么实现？
源代码如下：
<!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>css"边框法"实现气泡对话框效果1</title>
<style>
.outer_box{ width:190px; height:90px; background:#6DC2E7; border:1px solid #6DC2E7; position:relative;}
.inner_box{ width:180px; height:80px; margin:5px; background:#ffffff;}
.out_bubble{ height:0px; width:0px; overflow:hidden; border-style:solid dashed dashed dashed; border-width:26px; border-color:#6dc2e7 transparent transparent transparent; margin-left:30px; position: absolute; margin-top:-5px; z-index:100;}
.inner_bubble{height:0px; width:0px; overflow:hidden; border-style:solid dashed dashed dashed; border-width:15px; border-color:#fff transparent transparent transparent; position:absolute; margin-left:40px;margin-top:-5px; z-index:101; }
</style>
</head>
<body>
<div class="outer_box">
<div class="inner_box">这里是框框里面的内容</div>
<div class="out_bubble"> </div>
<div class="inner_bubble"></div>
</div>
</body>
</html>
二、字符
说到符号，最简单的莫过于直接输入一个三角形符号，当然也不排除有其他符号的，比如说QQ空间：
（图片来自QZone）
QZone用的是一个菱形然后采用固定高度隐藏下半部分的方法得到一个小三角形。
三、关于“边框法”的一些说明
1. IE6的奇偶bug
如果定位外框高度或是宽度为奇数，则IE6下，绝对定位元素的低定位和右定位会有1像素的误差。所以，尽量保证外框的高度或宽度为偶数值。
2. IE6的空div莫名高度bug
IE6下，空div会有莫名的高度，也就是说height:0;不顶用，此时形成的尖角的实际占高于其他浏览器是有差异的。可使用font-size:0; + overflow:hidden;修复此问题。
3. IE6不支持实线边框透明transparent属性
IE6不支持实线边框透明transparent属性，当某边框设置为transparent属性，且有宽度的话，那么透明会以默认的黑色显示的。解决方法有两个，一是将需要隐藏的颜色设置为背景色，这样与透明效果一样，此法有局限性，在复杂“边框法”应用下是行不通的；二是可以使用dashed代替solid，可以实现IE6下边框transparent透明。
浙公网安备 33010602011771号