在CSS3中，我們可以通過定義一個div，用各種形式對它進行修改，達到圖示的標準。

為什麼要用圖示

CSS繪製的圖示反應速度要比圖片更快，圖片還要載入，會慢一些，圖示本身在CSS載入的時候就已經載入完畢，幾乎沒有延遲。

圖示製作

三角形

示例程式碼如下：

<style>
      div {
            width:0;
            height:0;
            border-width:100px;
            border-style: solid;
            border-color: red transparent transparent transparent; /*將右邊、下邊、左邊變成透明*/
         }
</style>
 

這裡就是三角形的例項。在border-color中，我們可以調整哪些邊被隱藏。
其原理就是將元素的寬高設定為0，然後設定較粗邊框，並將其中的任意兩條或三條邊框定義為transparent(透明)。

梯形

示例程式碼如下：

      <style>
            div {
                  width:100px;
                  border:100px solid transparent;
                  border-bottom:100px solid hotpink;
            }
      </style>
 

效果如這裡，當我們修改梯形大小時，需要把width中的值、border的第一個值、border-bottom的第一個值設定成相同的數值即可。
其實實際上，這裡繪製的梯形，實際是在三角形的基礎上，設定一定的寬度。

圓

示例程式碼如下：

div {
                width:100px;
                height:100px;
                border:1px solid red;
                border-radius:50%;
                background-color: turquoise;
}

這裡

書籤

示例程式碼如下：

div {
                width:0;
                height:120px;
                background-color: turquoise;
                border: 120px solid transparent;
                border-bottom: 120px solid white;
}

這裡是書籤。底部的三角形是需要跟隨背景色的改變而改變的，所以要記得改一改。

下載箭頭

示例程式碼如下：

div {
                width:0;
                color:hotpink;
                border:160px solid transparent;
                border-top: 160px solid;
                box-shadow: 0 -240px 0 -80px;
}

這裡是下載箭頭。其原理是通過border屬性製作一個三角形，然後再用box-shadow製作正方形，拼合一下即可。但是我們不能用width和height，因為正方形和三角形始終一樣大。

暫停鍵

示例程式碼如下：

div {
                width:100px;
                height:100px;
                color:turquoise;
                border:1px solid;
                border-radius:100px;
                outline:20px solid;
                outline-offset: -52px;
}

這裡是暫停鍵。
outliner-offset是偏移量。在這裡，如果將outline-offset的值改為-70px，就會出現一個加號，可以嘗試嘗試。

結尾

CSS3和HTML5的功能非常多，建議大家在學習CSS和HTML的基礎上再去深入學習，這樣收穫更大。