如何用HTML CSS实现可变宽度的复杂形状？求形状名称与方案

形状名称 #

这个形状一般叫箭头式文本标签，常被用在面包屑导航里做单个节点的样式，也有人叫它燕尾标签。

自适应宽度的CSS实现方案 #

不用SVG，纯HTML+CSS就能搞定，核心是用容器的伪元素画出左右箭头，中间区域跟着文本长度自动变宽：

HTML结构 #

<div class="arrow-label">这里是会自适应的文本内容</div>

CSS代码 #

.arrow-label {
  position: relative;
  display: inline-block; /* 让容器随文本宽度自适应 */
  padding: 8px 24px;
  background-color: #4CAF50;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

/* 左侧箭头 */
.arrow-label::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  /* 用边框绘制三角形 */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 12px solid #4CAF50;
}

/* 右侧箭头 */
.arrow-label::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 0;
  /* 用边框绘制三角形 */
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 12px solid #4CAF50;
}

简单调整技巧 #

• 要是只需要单边箭头（比如面包屑的第一个/最后一个节点），删掉对应的::before或::after代码就行
• 想改大小的话，调整padding或者箭头的边框尺寸（比如border-top: 20px solid transparent）就能适配不同字体
• 换颜色的话，把背景色和箭头的边框色改成同一色值就好

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