[分享]css3打出小图标

CSS3是最新的CSS版本，它通过添加新的属性和值来丰富了前端开发的功能。其中，CSS3可以轻松地制作各种小图标，如箭头、星星、菜单等等。/ 制作箭头 / .arrowup { width: 0; h...

CSS3是最新的CSS版本，它通过添加新的属性和值来丰富了前端开发的功能。其中，CSS3可以轻松地制作各种小图标，如箭头、星星、菜单等等。

/* 制作箭头 */
.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #000;
}

/* 制作星星 */
.star {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 30px solid #ff0;
    border-left: 20px solid transparent;
    transform: rotate(35deg);
}

/* 制作菜单 */
.menu {
    width: 30px;
    height: 20px;
    position: relative;
}
.menu:before,
.menu:after {
    content: ';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #000;
}
.menu:before {
    top: 0;
}
.menu:after {
    bottom: 0;
} 

以上代码演示了如何用CSS3制作出一个箭头、星星和菜单图标。通过添加不同的属性和值，我们可以轻松地制作出各种各样的小图标，让网站页面更加美观与生动。