使水平div中的多个斜线图像可点击

Question

不太确定标题是否适合我的问题，但这是我能做到的最好的方法：）

我正在尝试创建一个包含多个图像的水平条，其中所有图像都与下一个图像倾斜。.（请参见下图）。

我什至不确定CSS是否可以使用它。（即使在向上和向下缩放时也可以使用）。

我希望此水平栏中的每张图片都可点击。.AKA：如果您将武士悬停，就会应用：hover效果并且可以点击（a href：）..

Answer 1

喜欢吗？

body {
  margin:0
}

.cont {
  width:80%;
  height: 70%;
  display:flex;
  perspective:1000px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
  display:flex;
}

.cont a {
  display:block;
  height: 100%;
  flex:1;
  background-size:cover;
  transform: skew(25deg);
  position: relative;
  overflow: hidden;
}

.cont a::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: -50%;
  transform: skew(-25deg);
   background-size:cover;
   background: url("https://picsum.photos/600/700");
   position: absolute;
}

.cont a:nth-child(2)::before {
  background: url("https://picsum.photos/600/740");
}

.cont a:nth-child(3)::before  {
  background: url("https://picsum.photos/600/720");
}

.cont a:nth-child(4)::before   {
  background: url("https://picsum.photos/600/750");
}

<div class="cont">
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>