CSS3是前端開發中非常重要的一個技術，通過CSS3，我們可以實現非常多樣化的效果。今天，本文將介紹如何使用CSS3制作一個漂亮的菱形導航。

.nav-wrapper {
position: relative;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav li {
display: inline-block;
position: relative;
}
.nav li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
transform-origin: center center;
transition: all .3s ease-out;
}
.nav li a:hover {
transform: rotate(45deg) scale(1.2);
background: #ff4c00;
}
.nav li a:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
border-top: 10px solid #2ecc71;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform: translateX(-50%);
}
.nav li a:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
border-bottom: 10px solid #2ecc71;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
transform: translateX(-50%);
}

通過以上的CSS代碼，我們可以制作出一個漂亮的菱形導航。