如何实现div倾斜45°且内部内容不旋转？解决hover样式异常

嘿，这个需求其实挺常见的，用CSS的变换属性就能轻松搞定！核心思路就是把容器的倾斜和内部内容的校正分开处理，这样既能让Div呈现45度倾斜的外观，又能保证内部内容保持正常方向，同时悬停效果也会跟着Div的倾斜范围走。

我给你两种常用的实现方案，你可以根据自己的HTML结构选：

方案一：嵌套容器+反向倾斜 #

这种方法逻辑直观好理解，适合愿意多一层嵌套的情况：

1. 外层容器负责实现45度倾斜，同时承载悬停的背景变化效果
2. 内层容器对内容做反向倾斜，抵消外层的变换，让内容回到正常角度

HTML示例 #

<div class="skew-container">
  <div class="inner-content">
    <!-- 这里放你的图片、文字等内容 -->
    <img src="your-blue-image.jpg" alt="蓝色图片">
  </div>
</div>

CSS示例 #

.skew-container {
  /* 给容器设置45度倾斜 */
  transform: skew(45deg);
  /* 初始背景色，可根据需求调整 */
  background-color: #f0f0f0;
  /* 悬停过渡动画，让颜色变化更平滑 */
  transition: background-color 0.3s ease;
  /* 记得给容器设置合适的宽高，或者由内容撑开 */
  width: 300px;
  height: 300px;
}

.skew-container:hover {
  /* 悬停时的背景色，会完全跟着倾斜的容器范围变化 */
  background-color: #66ccff;
}

.inner-content {
  /* 反向倾斜45度，抵消外层的变换，让内容恢复正常 */
  transform: skew(-45deg);
  /* 给内容加内边距，避免贴边 */
  padding: 20px;
  /* 确保内容占满容器 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.inner-content img {
  /* 如果图片需要适应容器，可设置宽高100% */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方案二：伪元素实现倾斜背景（无需额外嵌套） #

如果你不想增加HTML层级，可以用伪元素来做倾斜的背景层，内容直接放在原Div里，完全不需要变换：

HTML示例 #

<div class="skew-box">
  <!-- 直接放你的内容 -->
  <img src="your-blue-image.jpg" alt="蓝色图片">
</div>

CSS示例 #

.skew-box {
  position: relative;
  /* 隐藏伪元素超出容器的部分 */
  overflow: hidden;
  /* 设置容器宽高 */
  width: 300px;
  height: 300px;
  /* 内容居中对齐，可选 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.skew-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 伪元素做45度倾斜，作为背景层 */
  transform: skew(45deg);
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
  /* 把背景层放在内容下方 */
  z-index: -1;
}

.skew-box:hover::before {
  /* 悬停时伪元素变色，效果跟着倾斜范围走 */
  background-color: #66ccff;
}

.skew-box img {
  /* 内容保持正常，不需要任何变换 */
  width: 250px;
  height: 250px;
  object-fit: cover;
}

两种方案都能实现你要的效果：Div呈现45度倾斜，内部内容不旋转，悬停时的颜色变化完全贴合Div的倾斜区域。你可以根据自己的现有代码结构选择更合适的一种～

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