倾斜的主容器会扭曲图像内部如何避免内容偏斜

时间：2017-02-02 03:55:00

标签： html css css3

我需要倾斜主容器li而不是内容。

我能够歪曲每个li，但它也会歪曲

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

当我为图像添加计数器偏斜时，它会在角落处添加三角形状

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

我已设置CodePen example

我如何扭曲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>

1 个答案:

答案 0 :(得分：2)

当您向后倾斜img元素以取代父项的倾斜效果时，您需要增加img元素的大小以补偿大小调整，否则会出现白色像你看到的空间。

一种选择是缩放a元素，以便img元素的大小增加并占用额外的空白区域。

Updated Example 

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

或者，您也可以将缩放应用于img元素，具体取决于您要实现的目标。

以下是包含完整代码的更新代码段：

.cbp-rfgrid {
  list-style: outside none none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}
.cbp-rfgrid li {
  float: left;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: calc(100% / 4);
}
.cbp-rfgrid li a,
.cbp-rfgrid li a img {
  cursor: pointer;
  display: block;
  width: 100%;
}
.cbp-rfgrid li a img {
  max-width: 100%;
}
.cbp-rfgrid li a div {
  align-items: center;
  background: rgba(71, 163, 218, 0) none repeat scroll 0 0;
  bottom: 0;
  display: flex;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}
.cbp-rfgrid li a:hover div {
  background-color: rgba(204, 16, 64, 0.7);
  opacity: 1;
  text-shadow: 0 0 #000000;
}
.cbp-rfgrid li a div h3 {
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 1px;
  padding: 0 10px;
  text-transform: uppercase;
  width: 100%;
}
.album-causes-list-h3 {
  color: #ffffff;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-shadow: none;
}
.album-causes-albums-h3 {
  color: #ffffff;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  margin: 0 !important;
  padding: 5px 15px;
  text-shadow: none;
}
.album-causes-albums-h4 {
  color: #ffffff;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  margin: 0 !important;
  padding: 5px 15px;
  text-shadow: none;
}
.album-causes-albums-h4-cname {
  color: #cc1040;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  margin: 0 !important;
  padding: 5px 10px;
  text-shadow: none;
  text-transform: uppercase;
  width: 100%;
}
.album-list-div {
  flex-direction: column;
  justify-content: center;
}
.cbp-rfgrid-albums-list a:hover div {
  background-color: rgba(96, 80, 76, 0.8) !important;
  opacity: 1;
  text-shadow: 0 0 #000000 !important;
}
.cause-count {
  bottom: 5px;
  color: #ffffff;
  display: none;
  font-size: 12px !important;
  font-weight: 400;
  position: absolute;
  right: 5px;
  text-shadow: -1px 1px #000000;
}
@media screen and (max-width: 1400px) {
  .cbp-rfgrid li {
    width: calc(100% / 3);
  }
}
@media screen and (max-width: 1190px) {
  .cbp-rfgrid li {
    width: calc(100% / 3);
  }
}
@media screen and (max-width: 945px) {
  .cbp-rfgrid li {
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 660px) {
  .cbp-rfgrid li {
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 550px) {
  .cbp-rfgrid li {
    width: calc(100% / 1);
  }
}
@media screen and (max-width: 300px) {
  .cbp-rfgrid li {
    width: 100%;
  }
}
/*SKEW CODE HERE*/

.cbp-rfgrid li {
  transform: skew(-25deg)
}
.cbp-rfgrid li a {
  transform: skew(25deg) scale(1.3);
}
<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>

相关问题
最新问题