建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹利用css或html5畫(huà)出一個(gè)三角形的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
一、利用css的border屬性，即可實(shí)現(xiàn)三角形的繪制
代碼：
border 屬性--繪制三角形
效果圖：
利用css的border屬性實(shí)現(xiàn)三角形的原理：css盒模型
一個(gè)盒子模型包括: margin+border+padding+content，上下左右邊框交界處出呈現(xiàn)平滑的斜線. 利用這個(gè)特點(diǎn), 通過(guò)設(shè)置不同的上下左右邊框?qū)挾然蛘哳伾梢缘玫叫∪? 小梯形等.調(diào)整寬度大小可以調(diào)節(jié)三角形形狀.
.demo {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}當(dāng)把height和width都設(shè)置成0后，得到：
把其他顏色都去掉，只留下橙色后，就得到一個(gè)三角形:
二、利用html5的canvas畫(huà)布，即可實(shí)現(xiàn)三角形的繪制
canvas-繪制三角形
效果圖：
利用html5的canvas畫(huà)布，即可實(shí)現(xiàn)三角形繪制的重點(diǎn):
三角形在畫(huà)布中的三個(gè)坐標(biāo)：moveTo(10,10)----左上角坐標(biāo)，ctx.lineTo(110,10)-----右上角 坐標(biāo)， ctx.lineTo(60,50)----下面坐標(biāo)
以上是利用css或html5畫(huà)出一個(gè)三角形的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
分享文章：利用css或html5畫(huà)出一個(gè)三角形的方法-創(chuàng)新互聯(lián)
當(dāng)前地址：http://www.dlmjj.cn/article/didips.html
