如何使用CSS制作直平行四边形样式的价格标签背景

下面是两种生产环境常用的实现方式，可根据兼容性需求选择：

方案1：transform: skew() 实现（兼容性最优） #

适合需要兼容低版本浏览器的场景，核心思路是对容器做X轴倾斜，再反向倾斜内部文字抵消形变，保证文字水平显示。

示例代码： #

<!-- HTML结构 -->
<div class="price-tag">
  <span class="price-text">¥ 199</span>
</div>

/* CSS样式 */
.price-tag {
  display: inline-block;
  padding: 6px 20px;
  background-color: #f43f5e;
  color: #fff;
  border-radius: 2px;
  /* 调整角度数值即可修改平行四边形倾斜程度 */
  transform: skewX(-12deg);
}
.price-text {
  display: inline-block;
  /* 反向倾斜和父容器角度一致，抵消形变 */
  transform: skewX(12deg);
}

方案2：clip-path 实现（代码最简洁） #

不需要额外嵌套子元素，直接通过路径裁剪出平行四边形形状，文字默认保持水平，适合不需要兼容IE浏览器的场景。

示例代码： #

<!-- HTML结构 -->
<div class="price-tag">¥ 199</div>

/* CSS样式 */
.price-tag {
  display: inline-block;
  padding: 6px 20px;
  background-color: #f43f5e;
  color: #fff;
  border-radius: 2px;
  /* 调整百分比数值即可修改倾斜程度，也可自定义路径实现带缺口的标签效果 */
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

如果要实现参考图中左侧带三角缺口的价格标签，只需要修改clip-path路径即可：

.price-tag {
  /* 前面样式保持不变，修改clip-path属性 */
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}

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