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

先看下面一個例子：

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;

運行結(jié)果：

? ? 通過顯示的結(jié)果可以看到邊框的相交的地方都形成45°平分，那么，當(dāng)元素的寬高都設(shè)置為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;

運行結(jié)果：

? ? 這樣，我們就看到了四個等邊的三角形。那么，我們想要的是一個三角形，該怎么辦呢？試想一下，假如我們?nèi)コ粭l邊之后，會變成什么樣子呢？

代碼：

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

運行結(jié)果：

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

代碼：

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

運行結(jié)果：

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

代碼：

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

運行結(jié)果：

代碼：

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

運行結(jié)果：

代碼：

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

運行結(jié)果：

? ? 總結(jié)：可以通過移除一條或兩條邊框，設(shè)置相應(yīng)邊框透明，實現(xiàn)三角形的制作，可以變換多樣，更多例子不再列舉。

總結(jié)

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

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