1、打开html开发工具，在html开发工具中新建一个html代码页面。
2、在新建html代码页面上创建一个<div>标签，然后给这个标签添加一个class类为icon-user。
3、创建一个小圆。对icon-user类设置样式，创建一个小圆。
css样式代码：
.icon-user{
border-radius: 100%;
width: 2em;
height: 2em;
background-color: currentcolor;
position: relative;
margin:30px auto;
}
4、保存html代码，然后使用浏览器打开，即可在浏览器页面上看到一个小圆。
5、回到html代码页面，使用after伪类制作一个矩形圆角的一半，把这个半矩形放在小圆的下面。
css样式代码：
.icon-user::after{
content: "";
position: absolute;
top:98%;
left: -0.5em;
border-radius: 1em;
background-color: currentcolor;
height: 1.8em;
width: 3em;
border-top-left-radius: 1.2em;
border-top-right-radius: 1.2em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
6、保存html代码，然后使用浏览器打开，即可在浏览器上看到一个用户小图标。
7、页面所有代码。可以直接复制所有代码粘贴到新建html页面，保存后使用浏览器打开即可看到效果。
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon-user{
border-radius: 100%;
width: 2em;
height: 2em;
background-color: currentcolor;
position: relative;
margin:30px auto;
}
.icon-user::after{
content: "";
position: absolute;
top:98%;
left: -0.5em;
border-radius: 1em;
background-color: currentcolor;
height: 1.8em;
width: 3em;
border-top-left-radius: 1.2em;
border-top-right-radius: 1.2em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
</style>
</head>
<body>
<div class="icon-user"></div>
</body>
</html>
