css怎么繪制箭頭？

在網頁制作中，很多時候都會有箭頭的情況，我們可以使用css來繪制箭頭，css是如何繪制箭頭的呢？下面我們來看一下使用css繪制箭頭的方法。

我們可以使用css繪制三角形來制作箭頭。

 

一、繪制三角

html代碼：

<div></div>

css代碼：

.container{ width: 0; height: 0; border: 50px solid; border-color: red yellow green blue;}

利用border繪制了四個三角組成的矩形，現在要繪制三角形，只需要讓其他任意三個三角形變為透明即可。
修改代碼：

border-color: red transparent transparent transparent;

效果圖：

豌豆資源搜索網站https://55wd.com 廣州vi設計公司http://www.maiqicn.com

二、繪制箭頭

利用三角繪制箭頭，只需要再繪制一個和此三角大小相同，方向相同的三角，顏色和背景顏色一樣，覆蓋在此三角上面，通過少量的位移形成箭頭。

css樣式：

.container{ width: 0; height: 0; border: 50px solid; border-color: red transparent transparent transparent; position: relative;}.container::after{ content: ''; position: absolute; top: -55px; left: -50px; border: 50px solid; border-color: white transparent transparent transparent;}

效果圖：