html - 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;

}