用css的border属性实现三角
时间：2009年09月14日作者：愚人码头查看次数:9,142 views评论次数：24
今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的，在现实的前端开发中也很有用，至少可以减小图片的字节。
先看看应用实例吧：
实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如
.box{
width:0px;
height:0;
border-bottom:50px #F00 solid;
border-left:50px #03F solid;
border-right: 50px #F90 solid;
border-top:50px #6C0 solid;
}
在浏览器中的显示如图：
点击查看demo：http://www.css88.com/demo/border/border1.html
这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角：
.to-top{
display:block;
overflow:hidden;
width:0px;
height:0px;
border:6px solid #ccc;
border-color:#ccc #fff;
border-width:0 6px 6px 6px;
}
更多的实例请点击查看demo：http://www.css88.com/demo/border/border.html
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《用css的border属性实现三角》
如果你读了我的文章，觉得有帮助： 
说明
说明
发表评论
没想到三角还能用这种实现。看来没有做不到，只有想不到。
[回复]
这个早就有书上说过。。。
[回复]
赞个，以前在哪里看过相似的文章，不错啊
[回复]
蛮有趣的，呵呵，不过为了一个三角添加了那么多的空标签有点那个……
[回复]
to:danceing_yao
多的空标签？一个三角只有一个标签啊！
[回复]
呵呵，不错，很久以前看过关于脚的做法，不过没这么用过
[回复]
IE 下可能还会有些“扭曲”，其实吧 font-size 设置成 0px 即可
[回复]
帅！！！！！！！！！
[回复]
不可思议
[回复]
学习了，真神奇啊
[回复]
太棒了，真喜欢这种效果。
[回复]
在IE6下 为什么会有不同呢
[回复]
顶个，爽
[回复]
IE下的锯齿很多～不知道有法解决没
[回复]
确实不错，不过这个有一个局限性，如果背景是图片的话，或者跟border的颜色不一致的时候就有点难看了。
[回复]
居然可以写出来呀，又长见识了
[回复]
厉害厉害 长见识了~~~~
[回复]