如何用CSS实现HTML中Image和Div单侧倾斜？三列布局适配

针对你需要的仅单侧倾斜需求，skew属性会同时倾斜元素的左右两侧，无法直接实现，这里提供两种可靠的解决方法：

方法一：使用clip-path（推荐） #

clip-path可以直接定义元素的可见区域为多边形，精准实现单侧或双侧倾斜效果，无需处理内部内容的反向变形：

核心CSS规则 #

/* 仅右侧倾斜：调整95%数值可控制倾斜角度，数值越小倾斜越明显 */
.skew-right {
  clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
/* 左右双侧倾斜 */
.skew-both {
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
/* 仅左侧倾斜 */
.skew-left {
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  overflow: hidden;
}
/* 内部内容/图片加宽，避免裁剪后出现空白 */
.skew-right .inner-content,
.skew-both img,
.skew-left img {
  width: 110%;
  height: 100%;
  object-fit: cover;
}

修改后的完整代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
  .skew-right {
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
    overflow: hidden;
  }
  .skew-both {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    overflow: hidden;
  }
  .skew-left {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    overflow: hidden;
  }
  .skew-right .inner-content,
  .skew-both img,
  .skew-left img {
    width: 110%;
    height: 100%;
    object-fit: cover;
  }
</style>
<section>
  <div class="customer-logos1 slider" style="color:#333;font-weight:400">
    <div class="slide">
      <div class="row" style="margin:0;">
        <!-- 第一列：仅右侧倾斜 -->
        <div class="col-lg-4 col-4" style="padding:0;">
          <div class="skew-right" style="background:#f7f7f7;height:100%">
            <div class="inner-content tm-offer-content" style="text-align:center;padding-top:25%">
              <h4>Brand ear ring starting from</h4>
              <h6>Our popular products are so beautiful to see that the shoppers are easily attracted to them.</h6>
              <span class="badge badge-warning" style="background:#A07F3D;color:white;font-size: inherit;
                padding: 0.55em 0.8em;"> Starting From 500</span>
            </div>
          </div>
        </div>
        <!-- 第二列：左右两侧都倾斜 -->
        <div class="col-lg-4 col-4" style="padding:0;">
          <div class="skew-both" style="height:100%">
            <img src="https://jewelit.in/admin/uploads/about/about-image.jpg" alt="Jewelry">
          </div>
        </div>
        <!-- 第三列：仅左侧倾斜 -->
        <div class="col-lg-4 col-4" style="padding:0;">
          <div class="skew-left" style="height:100%">
            <img src="https://jewelit.in/admin/uploads/about/about-image.jpg" alt="Jewelry">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

方法二：伪元素+skew（兼容旧浏览器） #

如果需要兼容不支持clip-path的旧浏览器，可以用伪元素模拟单侧倾斜：

示例（第一列右侧倾斜） #

.skew-right {
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
}
.skew-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  height: 100%;
  background: #f7f7f7;
  transform: skewX(-6deg);
  transform-origin: top right;
}

这种方法需要为不同倾斜方向单独调整伪元素的位置和变形原点，但兼容性更好。

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