小編給大家分享一下利用css畫出一個(gè)三角形的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比蓮都網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式蓮都網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋蓮都地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

首先我們來看一下效果圖：

實(shí)現(xiàn)代碼：

還是不理解的小伙伴可以看下面

1、設(shè)置div有一定寬高，四邊設(shè)置邊框

.triangle{
	width: 50px;
	height: 50px;
	border-top: 200px solid #00a497;
	border-bottom: 200px solid #cc7eb1;
	border-left: 200px solid #165e83;
	border-right: 200px solid #c85179;
}

上面代碼設(shè)置div有一定寬高，四邊設(shè)置邊框時(shí)，效果如下：

2、設(shè)置div寬高為0，四邊設(shè)置邊框?qū)挾葹?00px

.triangle{
   width: 0px;
   height: 0px;
   border-top: 200px solid #00a497;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

上面代碼設(shè)置div寬高為0，四邊邊框設(shè)置不同顏色時(shí)，效果如下：

3、接下來div寬高仍為0，去掉border-top

.triangle{
   width: 0px;
   height: 0px;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

上面代碼設(shè)置div寬高為0，只設(shè)置下邊框和左右邊框時(shí)，效果如下：

4、最后發(fā)現(xiàn)，只將border-bottom設(shè)置顏色，左右邊框透明，既可得到三角形

.triangle{
	width: 0px;
	height: 0px;
	border-bottom: 200px solid #cc7eb1;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
}

最終效果：

看完了這篇文章，相信你對(duì)利用css畫出一個(gè)三角形的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！