斜線導航 CSS 是一種獨特的導航欄樣式，在網站開發中經常使用。它以斜著的線條為基礎，使頁面菜單欄更具視覺吸引力，同時也能提高用戶體驗。

.navbar {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
background-color: #FFFFFF;
}
.navbar__item {
position: relative;
margin: 0 20px;
font-size: 18px;
}
.navbar__item:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #00203f;
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: center center;
}
.navbar__item:hover:before {
transform: scaleX(1);
}
.navbar__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-top: 7px solid #00203f;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
top: -7px;
left: 50%;
transform: translateX(-50%);
}
.navbar__item:hover:after {
border-top: 7px solid #FFFFFF;
}

這段 CSS 代碼主要定義了導航欄的樣式。.navbar 定義了整個菜單欄的樣式，.navbar__item 定義了每個菜單項的樣式。其通過:before 和 :after 偽類來實現了斜線導航的效果。

:before 偽類用于設置下劃線樣式，通過 transform: scaleX(0) 來進行隱藏，當鼠標懸停在 .navbar__item 上時，將其顯示，使用 transform: scaleX(1) 來實現一定的動態效果。

:after 偽類用于設置菜單項后面的三角形樣式，通過 border-top、border-left、border-right 來繪制三角形。當鼠標懸停在 .navbar__item 上時，將其變為白色，實現了一個簡單的選中效果。

總之，斜線導航適用于許多類型的網站，如電子商務，博客，IT 網站等。使用以上代碼，將能夠添加這種獨特的導航欄樣式。