注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

谈笑涧

已开通独立前端博客,请访问 http://www.candoudou.com

 
 
 

日志

 
 

css实现三角形及应用示例  

2012-03-08 10:19:24|  分类: div+css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

css实现三角形,网上讲了很多,但我发现一般都是三角向上或者向下的,向左向右这两方向似乎讲得很少,本人试了一下,发现原来在IE下很难搞~~(万恶的IE)...css实现三角形及应用示例 - 谈笑涧 - 谈笑涧
css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧:
            .triangle {               
                border-color: red green blue pink;
                border-style: solid;
                border-width: 20px 20px 20px 20px;
                width: 0;
                height: 0;
            }

<div class="triangle"/>
    </div>


css实现三角形及应用示例 - 谈笑涧 - 谈笑涧

那么,我们只有留下一条边框的时候会发现什么??

            .triangle {              
                border-color: red transparent transparent transparent;
                border-style: solid;
                border-width: 20px 20px 0px 20px;
                width: 0;
                height: 0;
            }

 


css实现三角形及应用示例 - 谈笑涧 - 谈笑涧
 怎样?出来了吧~~

同样道理,我们改成为向左向右的,

 

向左:     .triangle {              
                border-color: transparent red transparent transparent;
                border-style: solid;
                border-width: 20px 20px 20px 0px;
                width: 0;
                height: 0;
            }

向右:   .triangle {               
                border-color: transparent transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                width: 0;
                height: 0;
            }

大功造成!? 慢,你用的是什么浏览器?如果用的是非IE6的话,恭喜你!下面我们用IE6(咬牙切齿ing...),


css实现三角形及应用示例 - 谈笑涧 - 谈笑涧
 汗~~~~

 

原来,IE6默认给了背景黑色~~

只有好用IE专有的东东了,解铃还需系铃人(~_~)

首先,css hack,用下划线"_"!

                _border-top-color: white;
                _border-bottom-color: white;
然后用chroma filter :      _filter: chroma( color =white);

其实就是把不要的边过滤掉!

还要加上                font-size: 0;  line-height: 0;   

这样就彻底的去掉了黑色背景:

 

            .triangle {
                border-color: transparent  transparent transparent red;
                border-style: solid;
                border-width: 20px 0px 20px 20px;
                font-size: 0;
                line-height: 0;    
                width: 0;
                height: 0;
                _border-top-color: white;
                _border-bottom-color: white;
                _filter: chroma( color =white);
            }


css实现三角形及应用示例 - 谈笑涧 - 谈笑涧

html+css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css三角形</title>
<style>
.tipArrow {
/*右边有颜色,其他透明*/
border
-color: transparent #e00 transparent transparent;
border
-style: solid;
border
-width: 6px 6px 6px 0px;
padding:
0;
width:
0;
height:
0;
/* ie6 height fix */
font
-size: 0;
line
-height: 0;
/* ie6 transparent fix */
_border
-top-color: #dddddd;
_border
-bottom-color: #dddddd;
_filter: chroma( color
= #dddddd);
}
</style>
</head>
<body>
<div class="tipArrow"/>
</div>
</body>
</html>

 

  评论这张
 
阅读(353)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017