Question

我有一个独特的作业问题。我正在尝试复制此处的布局。

https://ibb.co/fYh6d3m

插入图像并居中很容易，与bg颜色同上。但是，我对如何在图像旁边添加箭头不知所措。

箭头不一定非要带您进入下一张图像，它们实际上只是用于交互按钮（即，单击向右箭头以链接到其中，单击向左箭头以转到fb等），但是必须这样做反应灵敏。

问题是，我们只能使用HTML和CSS（否则，通过Jquery太容易了）

有人可以在这里帮助我吗？我一直在尝试解决最近4个小时的问题。

我在下面粘贴了一些粗略的代码（请原谅.left上的怪异边距/边距，我在看是否可以陪审它，但没有用），我想我在正确的轨道，但是我似乎找不到找到将箭头放置在图像两侧的方法。

非常感谢您的帮助，谢谢。

尝试使用图片，但被告知我们不允许使用，因为它们必须是交互式的

花了好几个小时进行研究，但是如果没有正确的术语，我很茫然。

.left的边距和填充距离很远，因为我正在看是否可以使用这些陪审团来进行操纵，但是它也必须具有响应能力。

.image2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 15px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: -250px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

<section>
  <img src="images/image2.jpg" class="image2">
  <i class="arrow right"></i>
  <i class="arrow left"></i>

</section>

我正试图让它看起来像这样

https://ibb.co/fYh6d3m

通过悬停状态/链接使箭头交互，但不进行幻灯片显示中的图像。

在图像旁边添加箭头

0 个答案: