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

我起初也一頭霧水，后來看到一個類似的案例，才恍然大悟。我們都知道，css的每條邊相交的地方，都是三角，如果，將容器的寬高，設置為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代碼：

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

border-bottom-color:transparent;

border-left-color:transparent;

border-right-color:transparent;

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

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

作者：舒小羽

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。