如何用CSS实现带文本的垂直倾斜平行四边形并解决间距问题？

核心解决思路 #

通过两层嵌套元素分离形状与文本：外层容器执行skew变换实现平行四边形形态，内层文本容器反方向执行skew抵消变形，同时用Flex布局控制横向排列，彻底解决间距不受控和文本变形的问题。

完整实现代码 #

<div class="parallelogram-group">
  <div class="shape-box">
    <span class="text-content">文本内容1</span>
  </div>
  <div class="shape-box">
    <span class="text-content">文本内容2</span>
  </div>
  <div class="shape-box">
    <span class="text-content">更长的示例文本3</span>
  </div>
</div>

.parallelogram-group {
  display: flex;
  gap: 15px; /* 直接控制元素间距，不受内容宽度影响 */
  align-items: center;
  padding: 20px;
}

.shape-box {
  transform: skew(-15deg); /* 外层实现平行四边形 */
  background: #3498db;
  padding: 10px 28px;
}

.text-content {
  display: inline-block;
  transform: skew(15deg); /* 内层反方向偏移，还原文本形态 */
  color: #fff;
  font-size: 14px;
}

关键细节说明 #

• 用Flex布局的gap属性直接定义元素间距，替代调整内容宽度的方式，彻底避免间距随内容变化的问题
• 外层负责形状变换，内层负责文本还原，文本完全保持正常排版
• 如需调整倾斜角度，同步修改外层的skew(-Xdeg)和内层的skew(Xdeg)数值即可

内容的提问来源于stack exchange，提问作者mc-user