CSS圖片三角排列是一種在網(wǎng)頁設(shè)計中廣泛應(yīng)用的技術(shù)，可以讓我們輕松制作出美觀、簡潔的導(dǎo)航菜單或按鈕等元素。下面將介紹一種簡單的實現(xiàn)方式。

/* 設(shè)置外部容器為相對定位 */
.container {
position: relative;
}
/* 給每個三角形容器設(shè)置絕對定位 */
.triangle {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
/* 給每個三角形容器里的三角形設(shè)置絕對定位 */
.triangle:before {
content: "";
position: absolute;
top: 0;
right: -30px;
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #ccc;
}

在html中，只需要在容器內(nèi)添加多個三角形容器，并在這些容器里添加相應(yīng)的鏈接或其他內(nèi)容即可：

<div class="container">
<div class="triangle"><a href="#">Link 1</a></div>
<div class="triangle"><a href="#">Link 2</a></div>
<div class="triangle"><a href="#">Link 3</a></div>
</div>

這樣，我們就可以在網(wǎng)頁上看到三個等間距的三角形導(dǎo)航鏈接：


如果需要修改三角形的大小或間距，只需要調(diào)整相應(yīng)的CSS屬性值即可。