论坛首页 → Web前端技术论坛 →

css实现三角形及应用示例

浏览 7247 次
锁定老帖子 主题：css实现三角形及应用示例
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • kingkit
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 30
  • 来自: 广州
   发表时间：2010-06-15  

css实现三角形，网上讲了很多，但我发现一般都是三角向上或者向下的，向左向右这两方向似乎讲得很少，本人试了一下，发现原来在IE下很难搞~~(万恶的IE)...
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>




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

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





怎样？出来了吧~~

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



向左：     .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...），



汗~~~~



原来，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);
            } 



<!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>

 

知道有些同学要直接看效果的，哈哈：看

 

下载

三角形是出来了，那我们看一个应用的例子(结合了之前写的fadeIn,fadeOut)：

 

http://kingkit.com.cn/KUI/Tip.html

 

完整打包

 

 

  • 大小: 5.5 KB
  • 大小: 1.2 KB
  • 大小: 3.7 KB
  • 大小: 15.8 KB
  • KUI.rar (22.3 KB)
  • 下载次数: 0

博客链接：-------》http://kingkit.iteye.com/blog/692203
返回顶楼
         
  • Puras
  • 等级: 二星会员
  • 性别:
  • 文章: 158
  • 积分: 214
  • 来自: 哪
   发表时间：2010-06-22  
没权限查看图片附件？怪了
返回顶楼
          回帖地址
0 请登录后投票
  • kingkit
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 30
  • 来自: 广州
   发表时间：2010-06-23  
Puras 写道
没权限查看图片附件？怪了

我也发觉了，一点“查看图片”就跳去了登录。。。
返回顶楼
          回帖地址
0 请登录后投票
  • blank_y
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 广州
   发表时间：2010-07-01  
其它浏览器可以吗？版本不同也得换样式，这样很麻烦，不能用图片吗？
返回顶楼
          回帖地址
0 请登录后投票
  • 抛出异常的爱
  • 等级: 五钻会员
  • 性别:
  • 文章: 13663
  • 积分: 2762
  • 来自: 北京
   发表时间：2010-07-01  
去博客看吧
返回顶楼
          回帖地址
0 请登录后投票
  • dukai1008
  • 等级: 二星会员
  • 性别:
  • 文章: 156
  • 积分: 240
  • 来自: 深圳
   发表时间：2010-07-21  
CSS,圆角真是又爱又恨啊!爱是好看,恨是麻烦
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics