用css的border属性实现三角

由愚人码头撰写　http://www.css88.com/archives/1875

今天啄米鸟给我了一个冰剑的《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

这篇日志由愚人码头, 发表在 2009年09月14日于 11:10 下午, 文件归档于 (x)html+css 标签为 and tagged border, 三角型. 添加永久链接到书签中. 获得所有评论更新使用这里的日志RSS源. 发表评论或者复制引用通告地址: 引用通告 URL.

或许你对这些感兴趣:

刚刚被浏览过的文章：

14 条评论

vapour

发表了 2009年09月15日在 7:56 上午 | 永久链接

没想到三角还能用这种实现。看来没有做不到，只有想不到。
jimzhan

发表了 2009年09月15日在 8:48 上午 | 永久链接

这个早就有书上说过。。。
小木

发表了 2009年09月15日在 8:53 上午 | 永久链接

赞个，以前在哪里看过相似的文章，不错啊
danceing_yao

发表了 2009年09月15日在 9:06 上午 | 永久链接

蛮有趣的，呵呵，不过为了一个三角添加了那么多的空标签有点那个……
愚人码头

发表了 2009年09月15日在 9:08 上午 | 永久链接

to:danceing_yao
多的空标签？一个三角只有一个标签啊！
bujichong

发表了 2009年09月15日在 9:35 上午 | 永久链接

呵呵，不错，很久以前看过关于脚的做法，不过没这么用过
明城

发表了 2009年09月15日在 7:56 下午 | 永久链接

IE 下可能还会有些“扭曲”，其实吧 font-size 设置成 0px 即可
柴鸡不柴

发表了 2009年09月16日在 2:51 下午 | 永久链接

帅！！！！！！！！！
cz

发表了 2009年09月23日在 8:53 下午 | 永久链接

不可思议
mx1700

发表了 2009年09月30日在 5:57 下午 | 永久链接

学习了，真神奇啊
123

发表了 2009年10月9日在 1:16 下午 | 永久链接

太棒了，真喜欢这种效果。
sheak

发表了 2009年10月18日在 3:41 下午 | 永久链接

在IE6下为什么会有不同呢
dkl

发表了 2009年11月17日在 4:13 下午 | 永久链接

顶个，爽
yaya

发表了 2010年01月8日在 1:57 下午 | 永久链接

IE下的锯齿很多～不知道有法解决没

2 个引用通告

由 » 用css的border属性实现三角- WEB前端开发- 专注前端开发，关注用户体验发表在 2009年09月15日于 9:53 上午

[...] Read more from the original source: » 用css的border属性实现三角- WEB前端开发- 专注前端开发，关注用户体验 [...]
由前端天空-专注于互联网前端应用及开发 » Blog Archiv » 用css的border属性实现三角发表在 2009年09月25日于 8:17 下午

[...] 转自：css88 http://www.css88.com/archives/1875 [...]

WEB前端开发
专注前端开发，关注用户体验