CSS |生成一个人'＃39;图标

Question

我想使用css生成类似于此http://codepen.io/zthall/pen/aNPpqb的人物图标
如有必要，我也可以使用Javascript / jQuery。我上面列出的codepen的问题是他们正在使用一些css框架。

它并不需要与codepen完全相同，这只是一个例子。

CSS甚至可以实现这一点吗？我创建了简单的复选标记，但这就是全部。我赞成帮助！

请注意
我在任何地方都没有看过这个问题，所以我希望它不会消除负面情绪。它说我需要列出一些代码，但我没有代码。我找了这个问题，但是真的找不到很多结果。所以下面将是虚拟代码。

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

Answer 1

一旦编译完成它只是html和普通CSS，所以你的问题的答案是肯定的，它肯定是可能的。我将它简化了一点并略微收缩，因此它在这里预览得更好：

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>