首先我們新建一個100x100的正方形div，為了方便我們查看，設置一個背景顏色。

css代碼如下：

width: 100px;
height: 100px;
background-color: #333;

接著給這個div添加兩個border，

width: 100px;
height: 100px;
background-color: #333;
border-left:50px solid red;
border-bottom: 50px solid blue;

效果圖如下：

是不是感覺很神奇，為什么會這樣呢？在上面我們分別為這個div添加了50像素的左邊框和下邊框，在div左下角瀏覽器智能的將這兩種顏色平分了，上面是左邊邊框的紅色，下面是下面邊框的藍色。看到這里你可能疑惑了，不是要實現一個三角形嗎？怎么讓我設置邊框呢？別著急，我們接著再添加上面和右面兩個邊框。

   width: 100px;
   height: 100px;
   background-color: #333;
   border-left:50px solid red;
   border-bottom: 50px solid blue;
   border-right:50px solid green;
   border-top:50px solid yellow;

效果：

到這里你是不是已經明白了，我們接著把這個div的寬高設為0px，再看效果

哈哈，出來了四個三角形，你想要哪個，只需要把其他三個的邊框顏色設為透明就可以了。比如我想要下面的藍色的三角形，css代碼如下：

  width: 0px;
  height: 0px;
  border-left:50px solid transparent;
  border-bottom: 50px solid blue;
  border-right:50px solid transparent;
  border-top:50px solid transparent;

最終我們想要的三角形就出來了。

以上就是如何用CSS制作一個三角形（附代碼）的詳細內容，更多請關注php中文網其它相關文章！