如何使用CSS创建响应式箭头指针形状，适配欧盟能效评级组件开发

方案1：CSS clip-path 实现（兼容现有代码逻辑） #

直接用相对单位的clip-path切割箭头形状，通过双层容器实现统一黑色边框，完全响应式，无锯齿，比渐变方案美观度高很多。

/* 箭头外层容器（负责实现黑色边框） */
.arrow-wrap {
  display: inline-flex;
  width: 10%;
  height: 70%;
  background: #000;
  /* 用%定义箭头形状，自动适配宽高变化 */
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

/* 箭头内层容器（负责展示内容和背景色） */
.arrow {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 4%;
  margin: 1px; /* 露出1px的外层黑色背景作为边框 */
  font-weight: 700;
  font-size: 1em;
  color: #fff;
  background: #3b7634;
  /* 和外层保持相同的clip-path */
  clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

对应的HTML结构：

<div class="arrow-wrap">
  <span class="arrow">A</span>
</div>

你可以调整clip-path里的85%参数，控制箭头尖端的突出长度，按需调整即可。

方案2：inline SVG 实现（效果最优，适合Angular组件封装） #

SVG天然支持矢量缩放，不会出现锯齿，直接通过path的stroke属性定义边框，改fill属性就能换颜色，非常适合封装成Angular小组件。
示例SVG代码：

<svg viewBox="0 0 100 50" class="energy-arrow">
  <!-- 箭头路径，stroke是边框颜色，stroke-width是边框宽度 -->
  <path d="M0,0 L80,0 L100,25 L80,50 L0,50 Z" 
    stroke="#000" 
    stroke-width="1" 
    fill="#3b7634"
  />
  <!-- 等级文字 -->
  <text x="10" y="30" fill="#fff" font-weight="700" font-size="18">A</text>
</svg>

对应CSS控制大小，响应式适配：

.energy-arrow {
  width: 10%;
  height: 70%;
}

在Angular中可以封装为组件，通过@Input()传入等级、填充色等参数，循环生成所有能效等级的箭头即可。

内容的提问来源于stack exchange，提问作者Abdul-Qader Haddad