用纯css绘制实现创建写三角形.doc

2013-5-27酱油到此游Blog原创 用纯css绘制简单三角形本教程出自酱油到此游Blog 【本教程如有错误，欢迎去我的博客站点留言】最近想做个文字提示框，用Jquery可以做，但是为了做一个提示框就用Jquery,似乎大材小用，于是在网上搜索关于用纯css做提示框的文章，在百度的帮助下，居然找到了方案，窃喜！做提示框的关键一个步骤就是做出那个小小的三角形。网上有很多关于用css绘制三角形的文章，可惜一大推的都是把代码扔给你，没有文字说明，通过自己的实验给大家分享下绘制三角形的方法以及简单原理。绘制三角形的原理代码用纯css绘制三角形.triangle_testwidth:0;height:0;border:100px solid;border-top-color:red;border-left-color:yellow;border-right-color: blue;border-bottom-color:green;效果演示图（只有IE6的效果不尽人如意）：在IE6下的效果：在其他浏览器下的正常显示效果：你会发现形成一个正方形，宽度为100px，并且4条边居然成了有颜色的三角形，是不是很奇妙呢！实验做到这里，我就在想了，有什么办法能优化一下，使得在IE6下也能接近正常的显示效果，于是我加了一句代码：.triangle_testfont-size:0;width:0;height:0;border:100px solid;border-top-color:red;border-left-color:yellow;border-right-color: blue;border-bottom-color:green;效果变了好多，你会发现顶部三角和底部三角正常，而左三角和右三角的顶点处还是不够尖，那么我们能做的也就这么多了，只能怨恨这个该死的IE6太土鳖了。效果图如下：好，我们可以绘制简单的三角形了，只需要把4个三角形中其中3个三角形变为透明就可以了！当然你也可以让其中2个三角变透明，成为一个直角三角形。变透明只要将border-color设置为transparent属性值即可。可惜的是IE6对边框设为transparent属性值不支持。所以需要将颜色改为跟背景色一致的颜色，我们这里背景色为白色，那么为了达到兼容性，需要将边框颜色改为白色。例如我做提示框，需要顶点朝上的那个绿色三角形，那么只需要将红色，黄色，蓝色的三角形变透明，这里需要用到css hack技术，css代码更改如下（为了实验，代码有冗余）：.triangle_testfont-size: 0;width:0;height:0;border:100px solid;border-top-color:transparent;_border-top-color:white; /* 针对ie6的css hack */border-left-color:transparent;_border-left-color:white;border-right-color: transparent;_border-right-color:white;border-bottom-color:green