課程
/前端開(kāi)發(fā)
/HTML/CSS
/從 psd 到 html
這個(gè)三角是怎么搞出來(lái)的,啥原理 啊,我的去學(xué)習(xí)學(xué)習(xí)了
2017-06-06
源自:從 psd 到 html 4-3
正在回答
把寬高設(shè)為0,就是三角形,寬高不為0就是矩形。
原理很簡(jiǎn)單:
.test?{ ????width:?100px; ????height:?100px; ????border-top:?50px?solid?orange; ????border-left:?50px?solid?gray; ????border-right:?50px?solid?gray; ????border-bottom:?50px?solid?red; }
觀察以上代碼,然后將寬和高逐步設(shè)置成0就會(huì)出現(xiàn)有個(gè)對(duì)角線的矩形;
然后根據(jù)需要,分別設(shè)置border的transparent值,即可得到相應(yīng)的三角形
http://www.jb51.net/article/42513.htm? 這是腳本之家一個(gè)制作三角形的文章.
方法很多,用搜狗輸入法v1里面的菱形修改也行,百度上搜索"html三角形"就有很多方法了
舉報(bào)
教你把PSD設(shè)計(jì)稿轉(zhuǎn)化成HTML,用案例來(lái)講解基本流程
1 回答為什么我的三角會(huì)偏離位置?
1 回答老師出現(xiàn)的那個(gè)角角是什么東西啊
1 回答為什么我這里顯示不出三角?
2 回答使用偽類元素制作三角形在低版本IE下面是不支持的;
1 回答footer部門右下角的logo和字,按照老師的方法也調(diào)不到右邊,求指點(diǎn)
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-11-11
把寬高設(shè)為0,就是三角形,寬高不為0就是矩形。
2017-08-31
原理很簡(jiǎn)單:
觀察以上代碼,然后將寬和高逐步設(shè)置成0就會(huì)出現(xiàn)有個(gè)對(duì)角線的矩形;
然后根據(jù)需要,分別設(shè)置border的transparent值,即可得到相應(yīng)的三角形
2017-06-06
http://www.jb51.net/article/42513.htm? 這是腳本之家一個(gè)制作三角形的文章.
方法很多,用搜狗輸入法v1里面的菱形修改也行,百度上搜索"html三角形"就有很多方法了