如何用HTML&CSS实现带图标、响应式边框的引用块？

核心思路 #

不需要用非透明图形叠加的麻烦方法，纯CSS就能实现图标“突破”边框的视觉效果，同时满足响应式和任意背景色的需求。

修改后的完整代码 #

CSS

.gray_box_conten {
  background-color: #e7e4f0; /* 可替换为任意背景色 */
  max-width: 890px;
  margin: 50px auto 0;
  padding: 30px 50px 30px 140px; /* 左侧预留图标空间 */
  display: flex;
  align-items: center;
  position: relative;
  min-height: 162px;
  border: 2px solid #22003f; /* 边框样式 */
  border-radius: 28px;
}

.man-QA {
  width: 120px;
  position: absolute;
  left: -20px; /* 让图标部分露出容器外 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  background-color: #e7e4f0; /* 和容器背景一致，覆盖边框 */
  padding: 8px;
  border-radius: 50%; /* 可选，优化视觉效果 */
}

.Quality__frequently p {
  color: #22003f;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .gray_box_conten {
    flex-direction: column;
    padding: 80px 20px 20px;
    text-align: center;
  }
  .man-QA {
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
  }
}

HTML

<div class="gray_box_conten">
  <div class="man-QA">
    <img src="https://innovista-health.com/wp-content/uploads/2023/10/qa-info-blurb-icon.svg" alt="QA信息图标" title="qa-info-blurb-icon">
  </div>
  <div class="Quality__frequently">
    <p>Quality performance success frequently results in higher distribution of shared savings and incentive payments.</p>
  </div>
</div>

关键细节说明 #

• 边框覆盖技巧：通过给图标容器设置和主容器一致的背景色，让图标“盖住”下方的边框，视觉上形成边框绕开图标的效果，完全支持任意背景色，只需同步修改两个元素的background-color即可。
• 定位逻辑：利用绝对定位将图标移出主容器，结合transform实现精准居中，保证布局稳定。
• 响应式处理：小屏设备下切换为垂直布局，把图标移到容器顶部，避免文字和图标拥挤。

关于SVG方案的解答 #

用SVG也能实现，但灵活性远不如纯CSS：如果要修改背景色或调整边框圆角，都需要重新编辑SVG文件，维护成本高。因此更推荐纯CSS方案，代码更简洁，调整更方便。

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