css3实现各种小图标
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2019-03-22 10:24:11
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
加号和减号图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<style type="text/css">
.jia,
.jian {
width: 15px;
height: 15px;
background: #848484;
border-radius: 100%;
position: relative;
display: inline-block;
}
.jia:after,
.jia:before,
.jian:before {
position: absolute;
content: '';
width: 9px;
height: 2px;
background: #fff;
transform: rotate(0deg);
top: 6px;
left: 3px;
}
.jia:after {
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="jia"></div>
<div class="jian"></div>
</body>
</html>上，下，左，右实心箭头
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<style type="text/css">
.arrow-up,
.arrow-down,
.arrow-left,
.arrow-right {
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
}
.arrow-up {
border-bottom-color: #868686;
}
.arrow-down {
border-top-color: #868686;
}
.arrow-left {
border-right-color: #868686;
}
.arrow-right {
border-left-color: #868686;
}
</style>
</head>
<body>
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
</body>
</html>
