? ? 網站前端頁面中，有時候會使用一些三角形，除了使用圖片的方式之外，利用css的border屬性也可以做出相對應的三角形。那么，利用border是如何實現三角形的制作的呢？

先看下面一個例子：

CSS代碼：

width:100px;height:100px;border-top: solid 100px blue;border-left: solid 100px black;border-right: solid 100px yellow;border-bottom: solid 100px red;

運行結果：

? ? 通過顯示的結果可以看到邊框的相交的地方都形成45°平分，那么，當元素的寬高都設置為0的時候會是什么樣子呢？

代碼：

width: 0;height: 0;border-top: solid 100px blue;border-left: solid 100px black;border-right: solid 100px yellow;border-bottom: solid 100px red;

運行結果：

? ? 這樣，我們就看到了四個等邊的三角形。那么，我們想要的是一個三角形，該怎么辦呢？試想一下，假如我們去除一條邊之后，會變成什么樣子呢？

代碼：

width: 0;height: 0;border-left: solid 100px black;border-right: solid 100px yellow;border-bottom: solid 100px red;

運行結果：

? ? 這次，我們看到了三個三角形，假如我們把黑色和黃色都換成透明的會不會就剩下一個紅色的等邊三角形了呢？

代碼：

width: 0;height: 0;border-left: solid 100px transparent;border-right: solid 100px transparent;border-bottom: solid 100px red;

運行結果：

? ? 很顯然，三角形出現了。我們可以再試著修改一下border的寬度或者隱藏其他的邊，就可以得到不同的三角形了。

代碼：

width: 0;height: 0;border-left: solid 100px transparent;border-right: solid 100px transparent;border-bottom: solid 50px red;

運行結果：

代碼：

width: 0;height: 0;border-top: solid 100px transparent;border-bottom: solid 100px transparent;border-left: solid 150px black;

運行結果：

代碼：

width: 0;height: 0;border-top: solid 100px transparent;border-left: solid 150px black;

運行結果：

? ? 總結：可以通過移除一條或兩條邊框，設置相應邊框透明，實現三角形的制作，可以變換多樣，更多例子不再列舉。

總結

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

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