Добавление стрелок рядом с изображением - PullRequest
1 голос
/ 07 мая 2019

У меня уникальная домашняя задача.Я пытаюсь повторить макет, который у меня здесь.

https://ibb.co/fYh6d3m

Вставка изображения и его центрирование достаточно просты, то же самое для bg цвета.Однако я не знаю, как добавить стрелки рядом с изображениями.

Стрелки НЕ обязательно переносят вас на следующее изображение, они буквально просто предназначены для использования в качестве интерактивных кнопок (т.е. нажмите настрелка вправо перейти к ссылке в, нажмите левую перейдите к FB, и т. д.) Однако это должно быть отзывчивым.

Суть в том, что мы можем использовать только HTML и CSS (в противном случае это было бы слишком просто с помощью Jquery)

Может кто-нибудь помочь мне здесь?Я пытался понять это за последние 4 часа.

Я вставил несколько грубых кодов ниже (пожалуйста, извините за странные поля / отступы на .left, я смотрел, смогу ли я присяжными это сделать, но это не сработало), и я думаю, что 'm на правильном пути, но я не могу найти способ расположить стрелки по обе стороны от изображения.

Большое спасибо за любую помощь, я ценю это.

Пробовал использовать изображения, но ему сказали, что нам нельзя, потому что они должны быть интерактивными

Потратил несколько часов на изучение, но без правильной терминологии я в растерянности.

Поля и отступы на левом краю очень далеки, потому что я видел, могу ли я присяжно использовать его, но это также должно быть отзывчиво.

.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

Со стрелками, взаимодействующими черезпри наведении курсора / связывание, но НЕ показ изображения в слайд-шоу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...