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);
            }

html+css:

  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-width: 6px 6px 6px 0px;
  12. padding: 0;
  13. width: 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

完整打包

css实现三角形及应用示例的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  3. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  6. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  7. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  8. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. 【Android UI】Android颜色系大全

    原文:http://android.eoe.cn/topic/summary 利用颜色的变化来突出信息.选择契合您应用主题的颜色系,并且提供视觉对比效果.注意,色弱的人士可能无法分辨红色和绿色. 调色 ...

  2. Shell脚本大量示例

     Shell基础之控制流结构 一.控制结构 几乎所有的脚本里都有某种流控制结构,很少有例外.流控制是什么?假定有一个脚本,包含下列几个命令: #!/bin/sh # make a directory ...

  3. [Windows Azure] How to use the Queue Storage Service

    How to use the Queue Storage Service version 1.7 version 2.0 This guide will show you how to perform ...

  4. (原) windows下autohotkey的快捷键脚本编写

    autohotkey 脚本很强大,可以接受传参.能各种程序逻辑控制.还可以把脚本转换成独立执行的EXE.(安装完后程序目录下有个小程序:Convert .ahk to .exe,直接UI上转换.)总之 ...

  5. 分享几个免费IP地址查询API接口

    几个免费IP地址查询API接口 1.IP地址查询接口:http://apis.juhe.cn/ip/ip2addr要先去https://www.juhe.cn/docs/api/...申请APPKEY ...

  6. HBase的Write Ahead Log (WAL) —— 整体架构、线程模型【转】

    转自:http://www.cnblogs.com/ohuang/p/5807543.html 解决的问题 HBase的Write Ahead Log (WAL)提供了一种高并发.持久化的日志保存与回 ...

  7. 部署openfire到linux环境下

    1.java环境部署:具体参考 http://blog.csdn.net/gufachongyang02/article/details/45337379 2.ant环境部署: 具体参考 http:/ ...

  8. LeetCode: Validate Binary Search Tree 解题报告

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  9. Docker 镜像操作

    列出镜像列表 我们可以使用 docker images 来列出本地主机上的镜像. runoob@runoob:~$ docker images REPOSITORY TAG IMAGE ID CREA ...

  10. 设计模式之原型模式（深入理解OC中的NSCopying协议以及浅拷贝、深拷贝）

    原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.原型模式其实就是从一个对象再创建另一个可定制的对象,而且不需知道任何创建的细节. 比如说,有一个Person类,有firstN ...