如何使用CSS或Bootstrap制作平行四边形卡片？

嘿，这个问题我熟！下面给你两种靠谱的实现方式，纯CSS和结合Bootstrap的，都能轻松搞定平行四边形卡片👇

我常用两种技巧来做，各有优劣，你可以按需选：

方法1：用transform: skew()倾斜元素 #

这是兼容性最好的方案，但要注意内容会跟着倾斜，所以得给内容套个反向倾斜的容器来修正：

/* 平行四边形卡片容器 */
.parallelogram-card {
  width: 300px;
  padding: 2rem;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 关键：X轴向左倾斜10度，正数是向右斜 */
  transform: skewX(-10deg);
}

/* 内部内容容器，反向倾斜修正文字 */
.card-content {
  transform: skewX(10deg);
}

对应的HTML结构：

<div class="parallelogram-card">
  <div class="card-content">
    <h3>我的平行四边形卡片</h3>
    <p>这里的文字不会跟着卡片倾斜，完美对齐～</p>
  </div>
</div>

小贴士：如果需要给卡片加边框，直接给.parallelogram-card加border就行，边框会跟着倾斜；要是想要直角边框，得额外用伪元素来实现哦。

方法2：用clip-path裁剪形状 #

这个方法更灵活，内容不需要额外修正，直接定义多边形路径就能得到平行四边形：

.clip-path-card {
  width: 300px;
  padding: 2rem;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* 关键：polygon(左上, 右上, 右下, 左下)，调整百分比改倾斜程度 */
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

HTML结构超简单，不用嵌套：

<div class="clip-path-card">
  <h3>我的平行四边形卡片</h3>
  <p>直接写内容就行，文字自动对齐～</p>
</div>

注意：旧版IE不支持clip-path，但现代浏览器（Chrome、Firefox、Edge等）都没问题，适合面向新用户的项目。

Bootstrap本身没有内置平行四边形类，但可以把它的卡片组件和自定义CSS结合，省得自己写基础样式：

/* 自定义平行四边形倾斜类 */
.bs-parallelogram {
  transform: skewX(-10deg);
}

/* 修正Bootstrap卡片内容的倾斜 */
.bs-parallelogram .card-body {
  transform: skewX(10deg);
}

对应的HTML结构，直接用Bootstrap的card组件：

<div class="card bs-parallelogram" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Bootstrap平行四边形卡片</h5>
    <p class="card-text">直接复用Bootstrap的卡片、按钮样式，效率拉满！</p>
    <a href="#" class="btn btn-primary">点我试试</a>
  </div>
</div>

这样既保留了Bootstrap的响应式、美观的基础样式，又实现了平行四边形效果，开发起来超省心～

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