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

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

1、新建一個(gè)元素，隨便什么元素，不過(guò)我習(xí)慣性的會(huì)用塊元素來(lái)做。如果行內(nèi)元素就display:block它。

截圖如下：

這就相當(dāng)于分別把四個(gè)邊框向正方形的中心拉伸。

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

4，實(shí)例

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

實(shí)現(xiàn)代碼如下。

!DOCTYPE html>   

截圖如下：

從以上圖形可以看出：

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

border-top-color: #2DCB70;

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

border-bottom-color: #333333;

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

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

看完上面的你也就學(xué)會(huì)用CSS繪制三角形箭頭了。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com