CSS如何制作出一個三角形

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

創(chuàng)新互聯(lián)是專業(yè)的綠園網(wǎng)站建設公司，綠園接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行綠園網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

   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的寬高設為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;

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

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

分享名稱：CSS如何制作出一個三角形
分享地址：http://muchs.cn/article16/gecogg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站設計、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)