CSS實(shí)現(xiàn)純文本圖形的繪制

徐嵩松

摘要：一般而言，圖形圖像只能通過專業(yè)軟件完成制作，并且生成的是.jpg、.gif等圖片格式，而通過CSS則可以直接繪制常見的圖形，并且這些圖形是純文本的，它可以顯著提高網(wǎng)頁的加載速度。

關(guān)鍵詞：CSS；圖形圖像；網(wǎng)頁

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）20-0198-03

在網(wǎng)站內(nèi)容的組成中，各類圖形圖像使內(nèi)容變得豐富多彩，這些圖像可以非常方便地通過專業(yè)制作軟件完成制作，如PS、CorelDRAW等，但這些圖像只能以圖片格式加入到網(wǎng)頁中。對(duì)用戶來說，大量運(yùn)用的圖片可能會(huì)影響網(wǎng)頁加載的速度；對(duì)設(shè)計(jì)者來說，圖形圖像的修改也變得十分不便。

隨著網(wǎng)頁技術(shù)的發(fā)展，如今利用DIV+CSS完成網(wǎng)頁的設(shè)計(jì)比較流行，而使用CSS（層疊式樣式表）本身就可以完成許多復(fù)雜的圖形繪制，如圓形、蛋形和心形圖案等。最重要的是，利用CSS繪制的圖形是純文本的，它在顯示速度和修改便利性方面具有無可比擬的優(yōu)勢(shì)。

1 三角形

1.1 上三角

最常見的三角形，即尖端朝上。效果如圖1所示。

CSS還可以完成其他更加復(fù)雜的圖形制作，但是需要注意的是必須考慮不同瀏覽器之間的兼容性問題。本文所有樣式代碼均只在IE9.0中調(diào)試完成。

參考文獻(xiàn)：

[1] 王大遠(yuǎn).DIV+CSS3.0網(wǎng)頁布局案例精粹[M].電子工業(yè)出版社，2011：2.