前段時(shí)間，有人問(wèn)下面這個(gè)圖的效果，怎么用css做出來(lái)，不用CSS3，兼容到IE7：

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

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;

那么就會(huì)得到下面的效果：

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

作者：舒小羽

鏈接：https://www.jianshu.com/p/d76ab0d19f0c

總結(jié)

以上是生活随笔為你收集整理的html 倒三角制作,css倒三角制作，css倒三角的原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。