石頭教你如何用純CSS3繪制三角形、箭頭。_html/css_WEB-ITnose

下面是具體步驟，把這些看一遍你也就懂得怎樣來繪制三角形、箭頭了。

1、新建一個元素，隨便什么元素，不過我習慣性的會用塊元素來做。如果行內元素就display:block它。

截圖如下：

這就相當于分別把四個邊框向正方形的中心拉伸。

上面的代碼出現4個三角形合并成一個正方形。到這里就很清晰了，只要把想要的保留，其它的設置為透明就可以達到三角形的效果，

4，實例

分別繪制向下，向右，向左向上的三角形。

實現代碼如下。

!DOCTYPE html>   

截圖如下：

從以上圖形可以看出：

繪制向下的三角形箭頭，就相當于將上邊框向下拉伸。

border-top-color: #2DCB70;

繪制向上的三角形箭頭，就相當于將下邊框向上拉伸。

border-bottom-color: #333333;

繪制向左的三角形箭頭，就相當于將右邊框向左拉伸。

繪制向右的三角形箭頭，就相當于將左邊框向右拉伸。

看完上面的你也就學會用CSS繪制三角形箭頭了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com