在 HTML 中,小三角常常被用來作為頁面中的指示符號,如展開/折疊內容或者表示導航菜單的子菜單等等。實現這些功能離不開小三角代碼的使用。下面介紹幾種實現小三角的 HTML 代碼。
<div> <span></span> </div>
這是最基本的實現小三角的方法。利用 div 和 span 標簽,設置 span 的 border 樣式即可。這里通過設置 border 的寬度,將邊框變成三角形。
<div></div>
這是利用偽元素實現的方法。我們在 div 前面插入一個空的偽元素,并設置其樣式為三角形。同樣的,通過 border 樣式,將其變成三角形。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M24 8l-12 16-12-16z"></path> </svg>
這是使用 SVG 實現的方法。SVG 是一種基于 XML 的圖像格式,使用非常靈活。我們在 SVG 標簽中插入一個 path 標簽,并設置 path 的 d 屬性為三角形路徑即可。
通過上述方法,我們可以在 HTML 中輕松地實現小三角形,這些方法各有特色,可以根據具體應用場景選擇使用。
上一篇vue formly