创建指定框架遇到问题，请问如何实现所需矩形图标及对应造型？

DevOps 小满

2026-10-14

实现方案

你需要的这种带斜切角装饰的矩形标签/图标可以通过纯HTML+CSS实现，不需要额外依赖，完整代码如下：

1. HTML结构

<div class="tag-group">
  <div class="tag-item">
    <span class="tag-icon">📊</span>
    <span class="tag-text">仪表盘</span>
  </div>
  <div class="tag-item active">
    <span class="tag-icon">📋</span>
    <span class="tag-text">表单页</span>
  </div>
  <div class="tag-item">
    <span class="tag-icon">📈</span>
    <span class="tag-text">数据页</span>
  </div>
</div>

2. CSS样式

/* 基础配置，可根据需求调整参数 */
:root {
  --tag-width: 120px;
  --tag-height: 48px;
  --tag-radius: 4px;
  --tag-bg: #f5f7fa;
  --tag-active-bg: #4080ff;
  --tag-active-color: #fff;
  --corner-size: 12px;
}

.tag-group {
  display: flex;
  gap: 16px;
  padding: 20px;
}

.tag-item {
  position: relative;
  width: var(--tag-width);
  height: var(--tag-height);
  border-radius: var(--tag-radius);
  background: var(--tag-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s;
}

/* 左上角斜切角实现 */
.tag-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: var(--corner-size) solid rgba(0,0,0,0.1);
  border-right: var(--corner-size) solid transparent;
}

/* 选中状态样式 */
.tag-item.active {
  background: var(--tag-active-bg);
  color: var(--tag-active-color);
  box-shadow: 0 2px 8px rgba(64, 128, 255, 0.3);
}

.tag-item.active::before {
  border-top-color: rgba(255,255,255,0.2);
}

.tag-icon {
  font-size: 18px;
}

.tag-text {
  font-size: 14px;
}