Html 倾斜主容器使图像内部倾斜如何避免内容倾斜

我需要倾斜主容器，它是

li

，但不是里面的内容

我可以扭曲每个

li

，但它也会扭曲内部的内容

.cbp-rfgrid li {
  transform: skew(-25deg)
}

当我为图像添加反扭曲时，它会在角上添加三角形形状

.cbp-rfgrid li a img {
 /* transform:skew(25deg)*/
}

我已经设置了密码笔

我怎样才能倾斜

li

，而不是图像周围有白色区域的内容

HTML

<ul class="cbp-rfgrid">
  <!--item-->
  <li>
    <a href="albums/6/crisis-relief">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Footbal </h3>
      </div>
    </a>
  </li>
  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Cricket </h3>
      </div>
    </a>
  </li>
  <li>
    <a href="albums/5/health">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Skiing</h3>
      </div>
    </a>
  </li>
  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Boxing </h3>
      </div>
    </a>
  </li>
  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div style="position: absolute; height: auto; display: block; background-color: rgba(0, 0, 0, 0);">
        <div style="background-color: rgba(0, 0, 0, 0.1); "></div>
      </div>
      <div>
        <h3 class="album-causes-list-h3">Baseball  </h3>
      </div>
    </a>
  </li>
  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div style="position: absolute; background-color: rgba(0, 0, 0, 0.0); height: auto; display: block;">

        <div style="background-color: rgba(0, 0, 0, 0.2); "></div>
      </div>
      <div>
        <h3 class="album-causes-list-h3">Category Six  </h3>
      </div>
    </a>
  </li>
  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Category Seven</h3>
        <span class="cause-count">Albums (0)</span>
      </div>
    </a>
  </li>

  <li>
    <a>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg">
      <div>
        <h3 class="album-causes-list-h3">Category EIGHT </h3>
      </div>
    </a>
  </li>
  <!--item-->
</ul>

拳击


棒球


第六类


第七类
相册（0）


第八类

当您将

img

元素向后倾斜以置换父元素上的倾斜效果时，您需要增加

img

元素的大小以补偿大小调整，否则会出现如您所见的空白

一个选项是向上缩放

a

元素，以便

img

元素的大小增加并占用额外的空白

或者，您也可以根据您试图实现的目标，对

img

元素应用缩放

以下是一个更新的代码片段，其中包含您的完整代码：

.cbp rfgrid{
列表样式：外部无；
保证金：0；
填充：0；
位置：相对位置；
宽度：100%；
}
.美国海关与边境保护局{
浮动：左；
溢出：隐藏；
填充：0；
位置：相对位置；
宽度：计算值（100%/4）；
}
.美国海关与边境保护局，
.美国海关与边境保护局{
光标：指针；
显示：块；
宽度：100%；
}
.美国海关与边境保护局{
最大宽度：100%；
}
.美国海关与边境保护局{
对齐项目：居中；
背景：rgba（711632180）无重复滚动0；
底部：0；
显示器：flex；
左：0；
不透明度：1；
位置：绝对位置；
右：0；
文本对齐：居中；
排名：0；
}
.cbp RFLI a：悬停分区{
背景色：rgba（204,16,64,0.7）；
不透明度：1；
文本阴影：0#000000；
}
.美国海关与边境保护局区域情报室a分区h3{
颜色：#ffffff；
字体大小：20px；
字母间距：1px；
填充：0 10px；
文本转换：大写；
宽度：100%；
}
.album-causes-list-h3{
颜色：#ffffff；
字体大小：30px！重要；
字体重量：600！重要；
字母间距：1px；
文本阴影：无；
}
.album-causes-albums-h3{
颜色：#ffffff；
字体大小：30px！重要；
字体重量：600！重要；
字母间距：1px；
边距：0！重要；
填充：5px15px；
文本阴影：无；
}
.album-causes-albums-h4{
颜色：#ffffff；
字体大小：20px！重要；
字体重量：400！重要；
字母间距：0；
边距：0！重要；
填充：5px15px；
文本阴影：无；
}
.album-cause-albums-h4-cname{
颜色：#cc1040；
字体大小：20px！重要；
字体重量：400！重要；
字母间距：0；
边距：0！重要；
填充物：5px10px；
文本阴影：无；
文本转换：大写；
宽度：100%；
}
.专辑列表组{
弯曲方向：立柱；
证明内容：中心；
}
.cbp rfgrid相册列表a：悬停div{
背景色：rgba（96,80,76,0.8）！重要；
不透明度：1；
文本阴影：0#000000！重要；
}
.原因计数{
底部：5px；
颜色：#ffffff；
显示：无；
字体大小：12px！重要；
字体大小：400；
位置：绝对位置；
右：5px；
文本阴影：-1px 1px#000000；
}
@媒体屏幕和屏幕（最大宽度：1400px）{
.美国海关与边境保护局{
宽度：计算值（100%/3）；
}
}
@媒体屏幕和屏幕（最大宽度：1190px）{
.美国海关与边境保护局{
宽度：计算值（100%/3）；
}
}
@媒体屏幕和屏幕（最大宽度：945px）{
.美国海关与边境保护局{
宽度：计算（100%/2）；
}
}
@媒体屏幕和屏幕（最大宽度：660像素）{
.美国海关与边境保护局{
宽度：计算（100%/2）；
}
}
@媒体屏幕和屏幕（最大宽度：660像素）{
.美国海关与边境保护局{
宽度：计算（100%/2）；
}
}
@媒体屏幕和屏幕（最大宽度：550px）{
.美国海关与边境保护局{
宽度：计算值（100%/1）；
}
}
@媒体屏幕和屏幕（最大宽度：300px）{
.美国海关与边境保护局{
宽度：100%；
}
}
/*在这里扭曲代码*/
.美国海关与边境保护局{
变换：倾斜（-25度）
}
.美国海关与边境保护局{
变换：倾斜（25度）比例（1.3）；
}

拳击


棒球


第六类


第七类
相册（0）


第八类

您是否只是尝试制作菱形列表项，并且希望背景图像和文本不倾斜？不，我希望它只倾斜25度，但不倾斜内容。背景图像和文本不得倾斜？或者只有文本不能歪斜？@haxxxton，类似这样的东西是的，正如问题中提到的，所以这是我不知道如何使用缩放和变换的新技巧。我尝试了不同的方法，但以相同的问题结束。这看起来是一个解决方案，但我不确定是否有其他方法可以不缩放它或缩放它it@Learning-如果不缩放或拉伸图像，我认为没有任何方法可以占用剩余空间并填充空白（否则，它将与最初的大小相同）。

.cbp-rfgrid li {
  transform:skew(-25deg)
}
.cbp-rfgrid li a {
  transform: skew(25deg) scale(1.3);
}