用CSS製作三角形,替代背景圖片
來源:酷知科普網 2.94W
網頁設計,製作,在早期,一般都是用背景圖片來呈現三角形,比如一個提示視窗,有一個三角形圖示指示,這個圖示一般就是背景圖片來的。
現在我們不用背景圖片,直接用CSS來生成,需要怎麼做呢?
操作方法
(01)先看下html程式碼,程式碼很簡單,就是幾個div,我們為其中一個div加上樣式名,angle, 這個div就是最終要呈現三角形的。
(02)然後新增對應的css樣式,讓div呈現為三角形,程式碼如圖,把div 長,高(width, height)設定為0,分別設定左邊框,右邊框和上邊框的樣式。
(03)看下呈現的效果,可以看到,就是一個標準的三角形,
(04)為什麼要用css來製作,而不是背景圖片呢,因為用css來製作,可以很容易的改變三角形的大小,背景色。下面把程式碼稍稍改一下,
(05)可以看到,三角形變大了,
(06)這次把顏色改一下,程式碼上就是把border的顏色就可以了,是不是很方便?
(07)下面看一個完整的應用例子,程式碼,效果如圖,