打开html开发工具,在html开发工具中新建一个html代码页面。
在新建html代码页面上创建一个
创建一个小圆。对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页面,保存后使用浏览器打开即可看到效果。所有代码:
可以制作看最后一步,最后一步含有所有代码。