У меня уникальная домашняя задача.Я пытаюсь повторить макет, который у меня здесь.
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
Со стрелками, взаимодействующими черезпри наведении курсора / связывание, но НЕ показ изображения в слайд-шоу.