在我們的網站中，經常會看到三條杠的圖標。這個圖標是現代web設計的一個非常流行的元素，它能夠展示菜單或指示更多內容的存在。在CSS中，我們可以使用以下三條杠代碼來創建這個常見的圖標。

.nav-toggle {
display: block;
width: 35px;
height: 24px;
position: relative;
background: transparent;
border: none;
cursor: pointer;
}
.nav-toggle:before, .nav-toggle:after {
content: '';
display: block;
width: 100%;
height: 4px;
background-color: #000;
position: absolute;
top: 0;
}
.nav-toggle:before {
transform: translateY(-10px);
}
.nav-toggle:after {
transform: translateY(10px);
}

在這個代碼塊中，我們創建了一個類名為.nav-toggle的元素，該元素將用作菜單圖標的容器。在該類中，我們設置了幾個屬性，包括展示為塊元素，寬度和高度的大小，以及一個指針光標。

接下來，我們定義了兩個偽元素:before和:after，這些元素將用于創建三條杠。我們使用content屬性來告訴CSS，我們想要在這些元素中放置空白內容。然后，我們設置這些元素的顯示屬性為塊元素，并設置它們的width和height屬性。我們還設置了這些元素的背景顏色為黑色，并使它們定位到.nav-toggle元素的頂部。

最后，我們使用CSS transform屬性來移動其中一個元素，從而創建三條杠的效果。我們通過設置第一個元素的transform屬性來將其向上移動10像素，而通過設置第二個元素的transform屬性，將其自上向下移動10像素。

現在，我們可以使用這個類將創建出一個看起來像三條杠的圖標，我們可以根據需要通過JavaScript或React等框架添加菜單功能，以讓我們的用戶實現更好的體驗。