纯css实现icon总结
以下是在工作之余总结的一些常用icon，纯css实现
CSS实现icon图标效果
目 录
1 关闭按钮. 2
2 单线箭头. 3
3 双线箭头. 3
4 三角形. 4
5 向下箭头. 5
6 圆圈. 6
7 空心圆圈. 6
8 向右指示. 7
9 提示框. 8
10 返回顶部和底部.
1 关闭按钮
UE图：
代码：
<html>
<head>
<style>
.closeButton
{
position: absolute;
right: 7px;
top: 8px;
-webkit-transform: rotate(45deg);
width: 18px;
height: 18px;
-webkit-border-radius: 9px;
-webkit-user-select: none;
background-color: black;
- opacity: .4;
}
.closeButton::before
{
position: absolute;
content: '';
height: 12px;
width: 2px;
left: 8px;
top: 3px;
background: white;
}
.closeButton::after {
content: '';
position: absolute;
width: 12px;
height: 2px;
left: 3px;
top: 8px;
background: white;
}
</style>
</head>
<body>
<div class="closeButton"> </div>
</body>
</html>
2 单线箭头
UE图：
代码：
<html>
<head>
<style>
.arrow::after {
content: '';
position: absolute;
top:50%;
left:50%;
-webkit-transform: rotate(315deg);
border: 2px solid #CCD0D6;
border-width: 2px 0 0 2px;
width: 9px;
height: 9px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: -3px 0 0 -3px;
-webkit-transform-origin: 33.3% 33.3%;
transform-origin: 33.3% 33.3%;
}
</style>
</head>
<body>
<div class="arrow"> </div>
</body>
</html>
备注：改变rotate值即可改变方向：45，向上；225向下；135，向右；315，向左
3 双线箭头
UE图：
代码：
<html>
<head>
<style>
.classify_angle::before, .classify_angle::after {
content: '';
width: 9px;
height: 9px;
border-top: 2px solid #666;
border-right: 2px solid #666;
position: absolute;
top: 8px;
-webkit-transform: rotate(45deg);
display: inline-block;
left: 2px;
}
.classify_angle::after {
left: 9px;
}
</style>
</head>
<body>
<div class="classify_angle"> </div>
</body>
</html>
4 三角形
UE图：
代码：
<html>
<head>
<style>
. trangile {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top:50px solid red;
}
</style>
</head>
<body>
<div class="trangile"> </div>
</body>
</html>
备注：修改方向问题，只需要修改border的各个方向的值即可，代码中为第一种情况，第二种情况需要将border-top:50px solid red修改为border-bottom:50px solid red;即可，左右方向同理
5 向下箭头
UE图：
代码：<html>
<head>
<style>
.arrow::before {
content: "";
position: absolute;
top: 15px;
left: 10px;
display: inline-block;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid black;
border-top: 0;
-webkit-transform: scale(1,1.2222);
-webkit-transform: translate(0,1px);
transform: scale(1,1.2222);
transform: translate(0,1px);
}
.arrow::after {
content: "";
position: absolute;
top: 25px;
left: 16px;
width: 6px;
height: 8px;
border-radius: 1px;
background: black;
border-radius: 1px;
}
</style>
</head>
<body>
<div class="arrow"> </div>
</body>
</html>
备注：向下只需要调整三角形的方向和竖条的位置即可
6 圆圈
UE图：
代码：
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="circle "> </div>
</body>
</html>
7 空心圆圈
UE图
代码：
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: transparent;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:1px solid;
}
</style>
</head>
<body>
<div class="circle "> </div>
</body>
</html>
8 向右指示
UE图：
代码：
<html>
<head>
<style type="text/css">
.way {
content: '';
position: absolute;
top:50%;
left:50%;
width: 24px;
height: 24px;
border: 3px solid #CCD0D6;
border-radius: 15px;
}
.way::after {
content: '';
position: absolute;
top:50%;
left:50%;
-webkit-transform: rotate(135deg);
border: 2px solid #CCD0D6;
border-width: 2px 0 0 2px;
width: 9px;
height: 9px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: -3px 0 0 -3px;
-webkit-transform-origin: 33.3% 33.3%;
transform-origin: 33.3% 33.3%;
}
</style>
</head>
<body>
<div class="way"></div>
</body>
</html>
9 提示框
UE图：
代码：<html>
<head>
<style>
.talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble::before {
content:"";
position: absolute;
right: 100%;
top: 0px;
margin-top:-8px;
left:80px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom:10px solid red;
}
</style>
</head>
<body>
<div class="talkbubble "> </div>
</body>
</html>
10 返回顶部和底部
UE图：
代码：<html>
<head>
<style>
.goTop {
z-index: 199;
display: block;
position: fixed;
right: 8px;
height: 38px;
width: 38px;
background: rgba(64, 64, 64, .9);
border-radius: 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, .3);
}
.goTop::before {
content: "";
position: absolute;
top: 15px;
left: 10px;
display: inline-block;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid white;
border-top: 0;
-webkit-transform: scale(1,1.2222);
-webkit-transform: translate(0,1px);
transform: scale(1,1.2222);
transform: translate(0,1px);
}
.goTop::after {
content: "";
position: absolute;
top: 11px;
left: 10px;
width: 18px;
height: 3px;
border-radius: 1px;
background: white;
border-radius: 1px;
}
</style>
</head>
<body>
<div class="goTop"> </div>
</body>
</html>
备注：向下的图标只需要稍微修改一下三角形的方向和横条的位置即可
附：相关文章
http://www.cnblogs.com/lhb25/archive/2012/12/03/css3-loading-animation-and-progress-bar.html
http://www.cnblogs.com/yjzhu/archive/2012/12/04/2801762.html
http://www.cnblogs.com/JohnnyChen/archive/2012/11/29/2794361.html
http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html
http://www.cnblogs.com/jihua/archive/2012/10/09/yuanjiao.html
http://www.cnblogs.com/undefined000/archive/2012/09/24/2700426.html
