zoukankan      html  css  js  c++  java

  • css实现三角形及应用示例

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

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


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

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



     怎样？出来了吧~~

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

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

    向右：   .triangle {               
                    border-color: transparent transparent transparent red;
                    border-style: solid;
                    border- 20px 0px 20px 20px;
                    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- 20px 0px 20px 20px;
                    font-size: 0;
                    line-height: 0;    
                    0;
                    height: 0;
                    _border-top-color: white;
                    _border-bottom-color: white;
                    _filter: chroma( color =white);
                }


    html+css:

    Js代码  收藏代码
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
    2. <html>  
    3.     <head>  
    4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.         <title>css三角形</title>  
    6.         <style>  
    7.             .tipArrow {  
    8.                 /*右边有颜色，其他透明*/  
    9.                 border-color: transparent #e00 transparent transparent;  
    10.                 border-style: solid;  
    11.                 border- 6px 6px 6px 0px;  
    12.                 padding: 0;  
    13.                  0;  
    14.                 height: 0;  
    15.                 /* ie6 height fix */  
    16.                 font-size: 0;  
    17.                 line-height: 0;  
    18.                 /* ie6 transparent fix */  
    19.                 _border-top-color: #dddddd;  
    20.                 _border-bottom-color: #dddddd;  
    21.                 _filter: chroma( color = #dddddd);  
    22.             }  
    23.         </style>  
    24.     </head>  
    25.     <body>  
    26.     <div class="tipArrow"/>  
    27.     </div>  
    28. </body>  
    29. </html>  
     

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

    下载

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

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

    完整打包
  • 相关阅读:
    monads-are-elephants(转）
    程序语言简史（转）
    语法的省略不能造成编译器的歧义
    scala getter and setter
    隐式类型转换
    java 调用 scala
    列表的操作
    Scala HandBook
    Scala 高级编程练习
    Net 2.0 C# 专用的只读类Tuple
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/4200966.html
Copyright © 2011-2022 走看看