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