CSS三角列表是Web開發中常用的技巧,它可以創建漂亮的箭頭指向下一個列表項目。在CSS中,三角形的繪制使用的是CSS border屬性的技巧。以下是一個示例。
<ul> <li><a href="#">項目1</a></li> <li><a href="#">項目2</a></li> <li><a href="#">項目3</a></li> <li><a href="#">項目4</a></li> </ul>
ul { list-style: none; margin: 0; padding: 0; } li { position: relative; margin: 0 0 20px 0; padding: 0 0 0 20px; line-height: 1.5em; } li:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #999 transparent transparent; transform: rotate(-45deg); } a { color: #333; text-decoration: none; } a:hover { text-decoration: underline; }
在這個三角列表實現中,我們利用了CSS border屬性繪制了一個45度的三角形,并通過旋轉transform屬性來實現向上和向下的箭頭。此外,我們還對列表元素設置了一些基本的樣式和text-decoration屬性控制鏈接的樣式。