Html 在div周围添加圆圈

我有一个看起来像一个大正方形的div，但是我想在div的顶部添加一个小圆圈（保持样式），里面有一个图标（我的意思是类似于字体的东西），这样人们就会知道它是什么类别的内容

如何使用css实现这一点

多谢各位

.leu测验{
位置：相对位置；
宽度：350px；
背景色：白色；
高度：400px；
边缘顶部：45像素；
边框底部：1px纯色浅灰色；
盒影：0px 2px#40c8d6；
盒影：0 4px 8px 0 rgba（0,0,0,0.01），0 2px 5px 0 rgba（0,0,0,0.19）；
}
.le_测验。帖子标题{
位置：绝对位置；
最高：60%；
左：2%；
字体大小：22px；
颜色：#404040；
}
.le_测验。后体{
边缘顶端：40px；
字体大小：22px；
}
le_测验。正文a：已访问{
边缘顶端：40px；
字体大小：22px；
颜色：#404040；
}
.leu-quick.cta{
位置：绝对位置；
最高：90%；
左：15px；
字体大小：粗体；
字体大小：14px；
颜色：#38C8D6；
}
.le_测验。cta：访问{
颜色：#38C8D6；
}

---

您可以添加另一个div并将boder半径设置为50%，使其成为一个圆

.leu测验，.circle{
位置：相对位置；
宽度：350px；
背景色：白色；
高度：400px；
边缘顶部：45像素；
边框底部：1px纯色浅灰色；
盒影：0px 2px#40c8d6；
盒影：0 4px 8px 0 rgba（0,0,0,0.01），0 2px 5px 0 rgba（0,0,0,0.19）；
}
.le_测验。帖子标题{
位置：绝对位置；
最高：60%；
左：2%；
字体大小：22px；
颜色：#404040；
}
.le_测验。后体{
边缘顶端：40px；
字体大小：22px；
}
le_测验。正文a：已访问{
边缘顶端：40px；
字体大小：22px；
颜色：#404040；
}
.leu-quick.cta{
位置：绝对位置；
最高：90%；
左：15px；
字体大小：粗体；
字体大小：14px；
颜色：#38C8D6；
}
.le_测验。cta：访问{
颜色：#38C8D6；
}
.圆圈{
宽度：100px；
高度：100px；
边界半径：50%；
顶部：100px；
左：120px；
}

---

您可以使用两个伪元素。一个用来把圆放在上面，另一个用来覆盖圆的下半部分

.leu测验{
位置：相对位置；
宽度：350px；
背景色：白色；
高度：400px；
边缘顶部：60像素；
边框底部：1px纯色浅灰色；
盒影：0px 2px#40c8d6；
盒影：0 4px 8px 0 rgba（0,0,0,0.01），0 2px 5px 0 rgba（0,0,0,0.19）；
}
.le_测验。帖子标题{
位置：绝对位置；
最高：60%；
左：2%；
字体大小：22px；
颜色：#404040；
}
.le_测验。后体{
边缘顶端：40px；
字体大小：22px；
}
le_测验。正文a：已访问{
边缘顶端：40px；
字体大小：22px；
颜色：#404040；
}
.leu-quick.cta{
位置：绝对位置；
最高：90%；
左：15px；
字体大小：粗体；
字体大小：14px；
颜色：#38C8D6；
}
.le_测验。cta：访问{
颜色：#38C8D6；
}
.leu测验：之前，.leu测验：之后{
内容：''；
位置：绝对位置；
背景：#fff；
排名：0；
}
.le_测验：之前{
左：0；
右：0；
高度：60px；
z指数：2；
}
.le_测验：之后{
左：50%；
转换：翻译（-50%，-50%）；
盒影：0 4px 8px 0 rgba（0,0,0,0.01），0 2px 5px 0 rgba（0,0,0,0.19）；
z指数：1；
宽度：100px；
高度：100px；
边界半径：50%；
}

你能举个例子或画一幅你想做的事情吗？你指的是什么字体的图标？哦，是的，对不起@MichaelCoker@MichaelCoker对不起，我忘了，有没有办法在圆圈内添加一个图标并将其定位？非常感谢@Krisrowe！有没有办法让它看起来没有阴影，所以我们认为它是同一个div？