首次翻译，整个译文带有我自己的理解，如果译得不好或不对之处还请同行朋友指点。

英文原文：《Creating Triangles in CSS》

demo地址：http://www.xuanfengge.com/demo/201308/Triangles/

我在我的职业生涯中遇到过一些技术和技巧，在最后一个演出上工作时，一个同事想我指出这种技术。我相信这个是由传奇 Eric Meyer最初发现的，但是我在网上找不到太多关于它的文档。所以我想在这里描绘一下这种技术。

产生原理

很少有人意识到，当浏览器在绘制边框时，是通过角来绘制。绘制三角形就充分利用了这一点：有一个边框（border）被着色成箭头的颜色，其他的三个边框都设置成透明（transparent）。然后你可以给这些边框设置更大的宽度（border-width），下面的这个图是20px。在这里展示的是一个各个边框都着色的DIV块。

正如你在方块里看到的三角形，这些三角形的边框尺寸（border-width）进行了小小的调整，这样就可以得到更尖锐的三角形。

再加上一些创造性思维和调整，就可以绘制出更多的形状。

现在来看一个应用：

这个是一个典型的聊天消息泡泡，没有用到任何图片。

html:

css:

这个技巧阿紫IE6下不能如愿的产生效果，主要是因为IE6不支持透明的边框，但是这里有个方案可以修复。你需要做的就是给“transparent”边加上一个其他的颜色比如pink，然后用滤镜：chroma来把这个颜色转换成透明。