CSS繪制三角形主要用到的是border屬性,也就是邊框。平時(shí)在給盒子設(shè)置邊框時(shí),往往都設(shè)置很窄,就可能誤以為邊框是由矩形組成的。實(shí)際上,border屬性是右三角形組成的,下面看一個(gè)例子:
將元素的長(zhǎng)寬都設(shè)置為0,顯示出來(lái)的效果是這樣的:
所以可以根據(jù)border這個(gè)特性來(lái)繪制三角形:
三角1:
三角2
三角3:
三角4:
三角5:
還有很多,就不一一實(shí)現(xiàn)了,總體的原則就是通過(guò)上下左右邊框來(lái)控制三角形的方向,用邊框的寬度比來(lái)控制三角形的角度。