HTML或CSS,这是怎么做到的？

Question

我找到了一个网站,有人只使用css和html来制作Windows 7开始菜单.另外我注意到搜索栏中有一个放大镜.

我的问题是这个人是如何在那里获得角色/符号的,因为我无法在网上找到任何放大镜,我认为他没有我们这个菜单的任何图像.

这是该网站的链接

如果有人太懒,这里是网站的图片,但你可能没有源,所以你可能无法找到它是什么,所以请访问该 网站.

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;

}