當前位置:妙知谷 >

遊戲數碼 >IT技術 >

用CSS製作三角形,替代背景圖片

用CSS製作三角形,替代背景圖片

網頁設計,製作,在早期,一般都是用背景圖片來呈現三角形,比如一個提示窗口,有一個三角形圖標指示,這個圖標一般就是背景圖片來的。
現在我們不用背景圖片,直接用CSS來生成,需要怎麼做呢?

用CSS製作三角形,替代背景圖片

操作方法

(01)先看下html代碼,代碼很簡單,就是幾個div,我們為其中一個div加上樣式名,angle, 這個div就是最終要呈現三角形的。

用CSS製作三角形,替代背景圖片 第2張

(02)然後添加對應的css樣式,讓div呈現為三角形,代碼如圖,把div 長,高(width, height)設置為0,分別設置左邊框,右邊框和上邊框的樣式。

用CSS製作三角形,替代背景圖片 第3張

(03)看下呈現的效果,可以看到,就是一個標準的三角形,

用CSS製作三角形,替代背景圖片 第4張

(04)為什麼要用css來製作,而不是背景圖片呢,因為用css來製作,可以很容易的改變三角形的大小,背景色。下面把代碼稍稍改一下,

用CSS製作三角形,替代背景圖片 第5張

(05)可以看到,三角形變大了,

用CSS製作三角形,替代背景圖片 第6張

(06)這次把顏色改一下,代碼上就是把border的顏色就可以了,是不是很方便?

用CSS製作三角形,替代背景圖片 第7張
用CSS製作三角形,替代背景圖片 第8張

(07)下面看一個完整的應用例子,代碼,效果如圖,

用CSS製作三角形,替代背景圖片 第9張
用CSS製作三角形,替代背景圖片 第10張
標籤: CSS 背景圖片
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/qye873.html