1

css と html だけを使用して Windows 7 のスタート メニューを作成している Web サイトを見つけました。また、検索バーに虫眼鏡があることに気付きました。

私の質問は、ウェブ上で拡大鏡を見つけることができず、このメニューの画像を使用していないと思われるため、この人がどのようにしてキャラクター/シンボルを取得したのかということです.

サイトへのリンクはこちら

あまりにも怠惰な人のために、ここにサイトの写真がありますが、ソースがないとわからないかもしれませんので、 サイトにアクセスしてください。

ここに画像の説明を入力

4

1 に答える 1

5

彼は::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;

}
于 2013-01-14T15:00:13.343 に答える