CSS的border实现三角的随想
Posted by Kevin | Filed under HTML/CSS/JS | 2009-10-25
沉寂了好久哇，今天出了冒个泡，证明我还活着，然后再有模有样来篇技术稿，然后继续沉寂。
今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下，如果要实现这样的三角效果，我会采取哪种方法？
我的第一反应就是用图片，但是同时也考虑到图片的缺点，如果以个页面需要几种样式的三角，是不是需要做几种图片？另外如果页面有换肤的需求，是不是同时图片也得换？
于是出于优化的思想考虑，看到用CSS来解决三角应该属于最佳解决方案吧，至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点，因为是CSS的，所以必须考虑到各个浏览器对css的兼容状态。
当然本文仅讨论如何用border实现三角。首先来看下面以副图片：
从图中大家可以看到，一个高度，宽度为0的box是如何，变成一个三角形的。一下是html代码。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>用css的border属性实现三角</title>
- <style>
- #box{
- margin:0px auto;
- width:0px;
- height:0;
- font-size:0px;
- border-bottom:50px #F00 solid;
- border-left:50px #03F solid;
- border-right: 50px #F90 solid;
- border-top:50px #6C0 solid;
- }
- </style>
- </head>
- <body>
- <div id="box"></div>
- </body>
- </html>
下面来看看三角的兼容性
测试平台：WIN XP SP2 2600
测试浏览器：Firefox 3.5.3 ，IE 6
测试结果以及兼容方案如下图
之前一直以为border就是一条直线，然后四边没有交集，因为很少用到超过5px的border,所以从来没有注意到border放大后的效果，现在终于明白了，border并不是直线，而是在顶点段同相邻边分享顶角。
三角的原理：
比如要做一个向上的三角形，那么之需要设置块状元素的width:0px;height:0px;font-size:0px;，然后给顶角相反方向的border外的三个边设置背景颜色为网页底色（上例中位白色）即可。
关于三角的demo演示：http://www.css88.com/demo/border/border.html
-
2009-10-26, 12:08 AM
呵呵，虽然看不懂，但貌似很厉害
恩，我顶你~pz
2009-10-26, 5:02 PM
这个不错.....
2009-10-27, 12:47 AM
@lin.x
也是看到的，觉得很有创意，平时都忽略了Border的表现了，罪过
2009-10-29, 3:16 PM
不得不说这个方法很有创意～～
2009-10-29, 3:32 PM
呵呵，之前没有想到border的属性竟然是等腰梯形....以为是一条直线呢
2009-10-29, 4:03 PM
哥很欣慰...
2009-10-30, 11:55 PM
终于更新了。。虽然看不懂。。最近打算自己也搞个空间 开个Blog
整理整理平时玩出来的东东。。不然时间久了 都忘完了。。
2009-11-05, 10:48 PM
正在学习前端开发，自学好困难，推荐本好书吧！
2009-11-06, 10:48 AM
@ChinaNox.Life
建议先看看基础的CSS,HTML书籍。基础打好后，学起来就快了！以后可以多看看前端方面的博客。像嗷嗷，淘宝UED，克军等一些人的...最重要是实战，多做项目多总结
2009-11-06, 11:00 AM
嗷嗷写了一本书叫《WEB标准设计》可以看看！
2009-11-06, 6:20 PM
我的链接你去掉了嘛
2009-11-07, 8:21 PM
知道了，我先学习下HTML和CSS。
2009-11-08, 10:02 PM
我回来了，加个链接。
2010-05-11, 10:39 AM
不错啊，好帖，支持，看来作者是很优秀的程序员啊。