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基础知识之拼写检查框架

    原文:http://android.eoe.cn/topic/android_sdk 拼写检查器框架 Android平台提供了一个拼写检查器的框架,来方便你在你的应用中实现并使用拼写检查.这个框架是A ...

  2. Android 7.0 出现 ”FileUriExposedException“ 和 ”解析包出现错误“ 异常的解决办法

    问题1 :android.os.FileUriExposedException: file:///storage/emulated/0/Android/data/com.xxx.xxx.xxx.rel ...

  3. 虚拟机vmware如何进入bios设置，设置启动项（装系统时用）

    方法/步骤   1 打开你要进入Bios的虚拟系统界面(处于关机状态).我这里的是server2003. 2 鼠标点击上部的 虚拟机 菜单. 3 在弹出的菜单中鼠标点击 电源 . 4 在弹出的下一级菜 ...

  4. 【Unity】10.1 类人动画的导入和设置

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.制作或购买类人模型 为了充分使用 Mecanim 类人动画系统和类人动画的动画重定位功能,需要先使用其他3D建模软件(例如3d ...

  5. TCP/IP 三次握手，温故知新

    今天看网络编程.又又一次看了一遍三次握手.曾经只知道连接有三次握手.今天发现原来断开也有三次握手. 三次握手:指通信两方彼此交换三次信息. 三次握手是在存在数据报丢失.反复和延迟的情况下,确保通信两方 ...

  6. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  7. JVM profiler tools

    http://docs.oracle.com/javase/7/docs/technotes/samples/hprof.html https://codeascraft.com/2015/05/12 ...

  8. [MyBean说明书]-如何制作BPL插件

    DEMO位置:     samples\simpleConsole\Lib-bpl [步骤]: 1. 首先新建一个BPL工程. 2. 添加一个窗体,实现IPluginForm接口(simpleCons ...

  9. 【socket】小项目-智能点餐系统

    系统说明 前段时间做的一个智能点餐系统,从0开始,用时3天,其中调bug(内存拷贝)调了一天,囧,现记一些架构文档 这个系统涉及到的知识点还是挺多的 典型的c/s模式,socket通信 多线程操作 数 ...

  10. 【机器学习】DBSCAN Algorithms基于密度的聚类算法

    一.算法思想: DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法.与划分和层 ...