HTML或CSS，這是如何完成的？

Question

我發現一個網站，有人只使用css和html來製作Windows 7的開始菜單。另外我注意到在搜索欄中有一個放大鏡。

我的問題是，這個人是如何獲得字符/符號，因爲我無法在網上找到任何放大鏡，我假設他沒有任何圖像的菜單。

這裏是鏈接到site

如果有人懶得這裏是現場的知情同意，但你可能不會發現它是什麼，沒有源，所以請訪問site。

Answer 1

他用::before和::after在<form>畫一個圓，一個旋轉的線。

你可以看到它在Chrome的檢查：

#menu .left-menu form#search::before { 
    content: ""; 
    width: 3px; 
    height: 0px; 
    border: 1px solid #666; 
    position: absolute; 
    z-index: 3; 
    left: 100%; 
    margin-left: -41px; 
    top: 23px; 
    -webkit-transform: rotate(-41deg); 
    -moz-transform: rotate(-41deg); 
    -ms-transform: rotate(-41deg); 
    -o-transform: rotate(-41deg); 
    transform: rotate(-41deg); 

} 

#menu .left-menu form#search::after { 
    content: ""; 
    width: 5px; 
    height: 5px; 
    border: 1px solid #666; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    position: absolute; 
    left: 100%; 
    margin-left: -37px; 
    top: 16px; 

}