沉寂了好久哇,今天出了冒个泡,证明我还活着,然后再有模有样来篇技术稿,然后继续沉寂。

今天在CSS88的博客看到一篇有趣的文章《用css的border属性实现三角》。首先我会站在自己角度思考一下,如果要实现这样的三角效果,我会采取哪种方法?

我的第一反应就是用图片,但是同时也考虑到图片的缺点,如果以个页面需要几种样式的三角,是不是需要做几种图片?另外如果页面有换肤的需求,是不是同时图片也得换?

于是出于优化的思想考虑,看到用CSS来解决三角应该属于最佳解决方案吧,至少节约了三角图片的下载时间和便于换肤。但是也有他的缺点,因为是CSS的,所以必须考虑到各个浏览器对CSS的兼容状态。

当然本文仅讨论如何用border实现三角。首先来看下面以副图片:

effect_1.jpg - 大小: 48.54 KB - 尺寸:  x  - 点击打开新窗口浏览全图

从图中大家可以看到,一个高度,宽度为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
测试结果以及兼容方案如下图

effect_2.jpg - 大小: 44.35 KB - 尺寸: 500 x 419 - 点击打开新窗口浏览全图

之前一直以为border就是一条直线,然后四边没有交集,因为很少用到超过5px的border,所以从来没有注意到border放大后的效果,现在终于明白了,border并不是直线,而是在顶点段同相邻边分享顶角。

三角的原理:

比如要做一个向上的三角形,那么之需要设置块状元素的width:0px;height:0px;font-size:0px;,然后给顶角相反方向的border外的三个边设置背景颜色为网页底色(上例中位白色)即可。

关于三角的demo演示:http://www.css88.com/demo/border/border.html