Wyatt Wyatt - 1 year ago 55
CSS Question

CSS | Generate a 'person' icon

I want to generate a person icon similar to this http://codepen.io/zthall/pen/aNPpqb using css.

I can also user Javascript/jQuery if necessary. The problem with the codepen I listed above, is that they are using some css framework.

It doesn't need to be exactly like that codepen, that is just an example.

Is this even possible with CSS? I have created simple checkmarks, but that's all. I apreciate the help!


I havn't seen the question anywhere, so I hope it doesn't recieve negativity. It says I need to list some code, but I do not have code. I'v looked for this question, havn't really found many results. So below will be dummy code.

This is dummy code because apparently I can't list a codepen.io link without code :\

Answer Source

enter image description here

It's just html and plain CSS once its compiled, so the answer to your question is "yes" it is certainly possible. I simplified it a little and shrunk it slightly so it previews better here:

body {
  background: #333;
  color: #ccc;
  padding-top: 20px;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;

.person {
  position: relative;
  height: 150px;
  width: 130px;

.person:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
  top: 75px;
  height: 50px;
  width: 130px;
  border: 0px solid lightgrey;
  border-radius: 45px 45px 0 0;
  border-width: 15px 15px 0px 15px;

.person:before {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 25px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border: 15px solid lightgrey;
<div class="person"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download