基于Bootstrap5的HTML/CSS异形组件开发及图标定位修复需求

需求说明 #

实现目标异形组件，需完成：

• 移除图标边框
• 将图标移至矩形左上角
• 修复图标定位异常问题

完整代码实现 #

HTML代码

<div class="node">
  <div class="node-image">
    <i class="bi bi-box"></i>
  </div>
  <div class="node-text">Name</div>
</div>

CSS代码

.node {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  width: 200px;
  height: 80px;
  padding-left: 15px; /* 调整内边距适配新图标位置 */
}

.node-image {
  position: absolute;
  left: 15px; /* 横向定位到矩形左侧内边距位置 */
  top: -25px; /* 纵向向上偏移，使图标一半露出矩形外 */
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none; /* 确保移除边框 */
}

.node-image i {
  width: 40px;
  height: 40px;
  color: #4CAF50; /* 可选：调整图标颜色匹配主题 */
}

.node-text {
  margin-left: 40px; /* 给图标留出空间，避免文字重叠 */
}

关键改动说明 #

1. 图标定位修正：将.node-image的left设为15px（匹配矩形内边距），top设为-25px（圆形直径的一半），让图标正好落在矩形左上角，一半露出矩形外，实现异形效果。
2. 移除边框：添加border: none确保圆形图标容器无额外边框，若使用Bootstrap图标自带边框，可直接添加Bootstrap5工具类border-0。
3. 布局适配：调整.node的内边距和.node-text的外边距，避免文字与图标重叠，保证整体布局美观。

内容的提问来源于stack exchange，提问作者Mohd. Shariq