css如何制作用户图标

创建一个小圆。对icon-user类设置样式，创建一个小圆。css样式代码： .icon-user{ border-radius: 100%; width: 2em; height: 2em; background-color: currentcolor; position: relative; margin:30px auto; }

保存html代码，然后使用浏览器打开，即可在浏览器页面上看到一个小圆。

回到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; }

保存html代码，然后使用浏览器打开，即可在浏览器上看到一个用户小图标。

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