如何使用CSS实现带圆形背景的内嵌对勾图标

首先修正你原有代码的一个无效属性：display: inline block写法错误，正确值为inline-block，缺少连字符会导致元素显示规则失效。
下面提供两种可直接运行的实现方案，同时拆解用到的核心CSS技巧：

方案1：双层结构实现（逻辑直观，易理解） #

外层元素负责渲染圆形背景，内层元素渲染对勾，通过flex布局实现居中，新手也能快速调整参数：

<div class="check-circle">
  <div class="Icon"></div>
</div>

.check-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e8f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Icon{
  display: inline-block;
  height: 28px;
  width: 14px;
  border-bottom: 6px solid #1677ff;
  border-right: 6px solid #1677ff;
  transform: rotate(45deg);
  border-radius: 2px;
  margin-top: -4px;
}

方案2：单元素伪元素实现（代码精简，无冗余标签） #

不需要额外嵌套HTML标签，仅用一个元素配合CSS伪元素就能实现，适合追求代码简洁的场景：

.Icon{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e8f4ff;
  position: relative;
}
.Icon::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 20px;
  height: 36px;
  border: solid #1677ff;
  border-width: 0 6px 6px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 2px;
}

核心CSS技巧说明 #

• 正圆实现：给宽高完全相等的元素设置border-radius: 50%即可生成正圆，不需要额外引入图片资源
• 元素居中：优先用flex布局做容器内元素的水平+垂直居中，相比margin偏移、绝对定位计算偏移量的方式，适配性更强，内部元素尺寸变化时不会错位
• 伪元素使用：用::before/::after绘制装饰性图形时，必须设置content属性，否则伪元素不会被渲染；通常配合父元素position: relative、自身position: absolute来精准控制位置
• 对勾绘制原理：只保留矩形元素的右侧、下侧边框，将元素旋转45度即可得到对勾形状，调整元素宽高比、边框粗细就能控制对勾的粗细和比例
• 视觉居中修正：旋转后的对勾视觉重心会略高于几何中心，微调顶部偏移值（比如示例里的margin-top: -4px、top: 45%）就能让对勾在圆形背景里看起来更协调，不需要死卡几何居中的数值

内容的提问来源于stack exchange，提问作者Mahi