css 圆形背景icon_纯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图：

代码：

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

}

2 单线箭头

UE图：

代码：

.arrow::after {

content: '';

position: absolute;

top:50%;

left:50%;

<