本篇文章為大家展示了CSS如何制作出一個三角形，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供邯鄲企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為邯鄲眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

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

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左下角瀏覽器智能的將這兩種顏色平分了，上面是左邊邊框的紅色，下面是下面邊框的藍色?？吹竭@里你可能疑惑了，不是要實現(xiàn)一個三角形嗎？怎么讓我設(shè)置邊框呢？別著急，我們接著再添加上面和右面兩個邊框。

   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;

效果：

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

哈哈，出來了四個三角形，你想要哪個，只需要把其他三個的邊框顏色設(shè)為透明就可以了。比如我想要下面的藍色的三角形，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;

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

上述內(nèi)容就是CSS如何制作出一個三角形，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標題：CSS如何制作出一個三角形-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://weahome.cn/article/dojsio.html