很多网页都有一些小图标，如删除图标，那如何使用css制作删除小图标？制作删除小图标思路：删除图标 = 一个没有下边框的圆角矩形 + 一条直线 +一个没有上边框的圆角矩形。方法/步骤1/8分步阅读

打开html开发软件，新建一个html代码页面，然后创建一个div标签，同时给这个div添加一个class类，案例中class类为icon-del。

创建div代码：

div class=icon-del/div

2/8

创建一个没有上边框的圆角矩形。创建style标签，然后在该标签里面创建没有上边距的圆角矩形。

css样式代码：

.icon-del{

border:0.3em solid currentColor;

border-top: none;

border-radius:0 0 0.5em 0.5em;

width: 3em;

height: 2.8em;

margin: 50px auto;

position: relative;

}

3/8

保存html代码，使用浏览器打开，查看没有上边框的圆角矩形。

4/8

回到html代码页面，在矩形上使用after伪类添加一条直线。

css样式代码：

.icon-del::after{

content: ;

width: 5em;

height: 0.3em;

position: absolute;

top:-0.5em;

left: -1em;

background-color: currentcolor;

}

5/8

保存html代码，使用浏览器打开，可以看到一条直线已经添加成功。

6/8

回到html代码页面，在一条直线上添加一个没有下边框的圆角矩形。

css样式代码：

.icon-del::before{

content: ;

border-radius: 0.8em 0.8em 0 0;

position: absolute;

top:-1.6em;

left: 0.1em;

height: 0.8em;

width: 2.2em;

border:0.3em solid currentColor;

border-bottom: none;

}

7/8

保存html代码，然后使用浏览器打开即可看到删除小图标已经创建成功。

8/8

页面所有代码。可以直接复制所有代码到新建html页面，粘贴保存后使用浏览器打开即可看到效果。

所有代码：

!DOCTYPE html

html

head

meta charset=UTF-8

title删除小图标/title

style type=text/css

.icon-del{

border:0.3em solid currentColor;

border-top: none;

border-radius:0 0 0.5em 0.5em;

width: 3em;

height: 2.8em;

margin: 50px auto;

position: relative;

}

.icon-del::after{

content: ;

width: 5em;

height: 0.3em;

position: absolute;

top:-0.5em;

left: -1em;

background-color: currentcolor;

}

.icon-del::before{

content: ;

border-radius: 0.8em 0.8em 0 0;

position: absolute;

top:-1.6em;

left: 0.1em;

height: 0.8em;

width: 2.2em;

border:0.3em solid currentColor;

border-bottom: none;

}

/style

/head

body

div class=icon-del/div

/body

/html

注意事项

可以直接查看最后一步骤，里面包含了制作小图标的所有代码。

CSSCSS删除图标CSS删除小图标CSS制作DEL图标