如何实现可拉伸且角度固定的非矩形问答题号标签背景？

针对你的需求，不推荐使用背景图或Sliding Doors技术——CSS原生特性就能实现更灵活、易维护的效果，无需依赖图片资源，同时完美满足「水平拉伸适配长题号+固定倾斜角度」的要求。下面是两种实用方案：

方案一：CSS Clip-path 极简实现 #

适合现代浏览器（支持CSS Clip-path的浏览器覆盖95%以上用户），代码最简洁，完全响应式。

核心思路 #

用clip-path定义固定倾斜角度的五边形路径，元素宽度会随题号内容自动拉伸，倾斜边的角度通过路径坐标锁定，不会随宽度变化而改变。

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Nabla&family=Open+Sans&family=Roboto:wght@400;500&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  margin: 2em 10vw;
  background: #f6f6f6;
}

h2 {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5em;
  font-weight: 400;
  font-size: 20px;
}

@media (min-width: 500px) {
  h2 {
    flex-direction: row;
    align-items: center;
    gap: 1em;
  }
}

mark {
  background-color: #f26419;
  color: white;
  padding: 0.2em 0.8em 0.2em 0.3em; /* 右侧留更多空间避免内容被裁剪 */
  font-weight: 500;
  font-size: 24px;
  /* 定义五边形路径，右侧倾斜角固定为45度 */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  white-space: nowrap; /* 防止题号换行 */
}

效果说明 #

• 题号长度变化时，标签会自动水平拉伸，右侧倾斜边的角度始终保持固定
• 无需额外HTML结构，直接复用原有<mark>标签

方案二：伪元素+边框兼容方案 #

如果需要兼容IE11等旧浏览器，可采用此方案，通过伪元素模拟倾斜边，兼容性更好。

核心思路 #

主元素负责左侧矩形区域，右侧的倾斜边用绝对定位的伪元素实现（利用边框生成三角形），主元素宽度随内容自动拉伸，伪元素的尺寸固定，保证倾斜角度不变。

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Nabla&family=Open+Sans&family=Roboto:wght@400;500&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  margin: 2em 10vw;
  background: #f6f6f6;
}

h2 {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5em;
  font-weight: 400;
  font-size: 20px;
}

@media (min-width: 500px) {
  h2 {
    flex-direction: row;
    align-items: center;
    gap: 1em;
  }
}

mark {
  position: relative;
  background-color: #f26419;
  color: white;
  padding: 0.2em 0.3em;
  font-weight: 500;
  font-size: 24px;
  white-space: nowrap;
  margin-right: 16px; /* 给伪元素留出空间 */
}

/* 生成右侧倾斜边 */
mark::after {
  content: '';
  position: absolute;
  top: 0;
  right: -16px;
  width: 0;
  height: 0;
  /* 边框宽度固定，保证倾斜角为45度 */
  border-top: 29px solid transparent;
  border-bottom: 29px solid transparent;
  border-left: 16px solid #f26419;
}

效果说明 #

• 同样支持自适应宽度，倾斜角度固定
• 兼容IE11及所有现代浏览器，无需图片资源

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