前段時間，有人問下面這個圖的效果，怎么用css做出來，不用CSS3，兼容到IE7：

我起初也一頭霧水，后來看到一個類似的案例，才恍然大悟。我們都知道，css的每條邊相交的地方，都是三角，如果，將容器的寬高，設(shè)置為0，而邊框非常粗，并且每條邊顏色不同，就會得到下面的效果：

css代碼：

.test{

width:0px;

height:0px;

border:100px solid red;

border-top-color:red;

border-bottom-color:blue;

border-right-color:orange;

border-left-color:black;

}

html代碼：

如果將其中三條邊的透明度設(shè)置為0，即，將上面的代碼的三條邊改成：

border-bottom-color:transparent;

border-left-color:transparent;

border-right-color:transparent;

那么就會得到下面的效果：

三角形已經(jīng)出來了，那么想實現(xiàn)一開始的效果，就簡單了，即再做一個比這個邊框細(xì)一點的三角形，邊框顏色為白色，蓋在這個倒三角的上面，就能實現(xiàn)了，而且，兼容性非常好，效果圖：