CSS菱形菜單是一種很炫酷的效果，通常用于網頁導航。它們可以增加網站的視覺吸引力，并使網站內容更具有組織性。今天我們將學習如何使用CSS來創建一個漂亮的菱形導航！

<ul class="diamond-menu">
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

以上是我們要創建菱形導航的HTML代碼。UL元素包含LI子元素，每個LI元素包含一個鏈接。在CSS中，我們將創建一個菱形菜單類diamond-menu，它將具有以下屬性：

.diamond-menu {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.diamond-menu li {
display: inline-block;
position: relative;
margin: 0 20px;
}
.diamond-menu li a {
display: block;
padding: 15px 40px;
font-size: 18px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
}
.diamond-menu li:before {
content: '';
position: absolute;
top: -12px;
left: -12px;
bottom: -12px;
right: -12px;
z-index: -1;
transform: skew(-45deg);
background-color: #f1c40f;
}
.diamond-menu li:hover:before {
background-color: #e67e22;
}

我們首先設置菜單的樣式。UL和LI，我們設置了零外邊距和內邊距并水平居中。LI元素設置為inline-block以使菜單水平排列。我們還使用了相對定位，使LI元素內的偽元素可以參照其作為參照點。偽元素使用絕對定位，并將其轉移45度。我們使用偽元素來創建菱形菜單的背景顏色。我們在HOVER偽元素上更改背景顏色以創建HOVER飛出效果。

現在，如果您查看您的網頁源代碼，你將看到我們剛剛編寫的HTML和CSS。您可以在服務器上發布這些文件，并通過輸入文件路徑來訪問您的新菱形菜單！