Блог

Главная - Вопросы по программированию - Как сделать svg-стрелки одинаковой длины?

Как сделать svg-стрелки одинаковой длины?

#html #css #svg

Вопрос:

Как сделать стрелку вправо такой же длины, как и стрелка влево? Это раздел под названием .сервисы, и это слайдер для всей страницы, и чтобы перейти в нужный раздел, вам нужно нажать «Узнать подробнее».

Сайт http://ca50234.tmweb.ru/

Код jsfiddle.net/oaxusr8h/

введите описание изображения здесь

введите описание изображения здесь

 .arrows-block {
  background-color: black;
} 
 <div class="arrows-block">

    <!-- Arrow left -->
    <div class="swiper-button-prev-custom">
        <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.646446 3.64644C0.451187 3.8417 0.451187 4.15828 0.646446 4.35355L3.82843 7.53553C4.02369 7.73079 4.34027 7.73079 4.53554 7.53553C4.7308 7.34027 4.7308 7.02368 4.53554 6.82842L1.70711 3.99999L4.53554 1.17157C4.7308 0.976304 4.7308 0.659722 4.53554 0.464459C4.34027 0.269197 4.02369 0.269197 3.82843 0.464459L0.646446 3.64644ZM81 3.5L1 3.49999L1 4.49999L81 4.5L81 3.5Z" fill="white" />
        </svg>
    </div>

    <!-- Arrow right -->
    <div class="swiper-button-next-custom">
        <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55.3536 4.35355C55.5488 4.15829 55.5488 3.84171 55.3536 3.64645L52.1716 0.464466C51.9763 0.269204 51.6597 0.269204 51.4645 0.464466C51.2692 0.659728 51.2692 0.976311 51.4645 1.17157L54.2929 4L51.4645 6.82843C51.2692 7.02369 51.2692 7.34027 51.4645 7.53553C51.6597 7.7308 51.9763 7.7308 52.1716 7.53553L55.3536 4.35355ZM0 4.5H55V3.5H0V4.5Z" fill="white" />
        </svg>
    </div>
</div>

Комментарии:

1. Как на JSFiddle, так и на вашем демо-сайте нет стрелок. Кроме того, каждый щелчок по левому меню «Наши услуги» вызывает ошибку Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'div.services-info>div.content>div.' is not a valid selector. .

Ответ №1:

Вы можете просто использовать SVG со стрелкой вправо и повернуть его так, чтобы он стал стрелкой влево. Кроме того, ваша стрелка вправо SVG имеет ширину 81px, в то время как сама по себе стрелка имеет ширину 56px. В случае, если вам нужно добавить пространство вокруг стрелок — вам лучше сделать это с помощью CSS. Я добавил второй пример со стрелками шириной 56 пикселей

 /* Add dark background to see white arrows */
.arrows-block {
  background-color: black;
  margin-bottom: 10px;
}

.swiper-button-prev-custom > svg {
  transform: rotate(180deg);
} 
 <div class="arrows-block">

    <!-- Arrow left -->
    <div class="swiper-button-prev-custom">
        <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55.3536 4.35355C55.5488 4.15829 55.5488 3.84171 55.3536 3.64645L52.1716 0.464466C51.9763 0.269204 51.6597 0.269204 51.4645 0.464466C51.2692 0.659728 51.2692 0.976311 51.4645 1.17157L54.2929 4L51.4645 6.82843C51.2692 7.02369 51.2692 7.34027 51.4645 7.53553C51.6597 7.7308 51.9763 7.7308 52.1716 7.53553L55.3536 4.35355ZM0 4.5H55V3.5H0V4.5Z" fill="white" />
        </svg>
    </div>

    <!-- Arrow right -->
    <div class="swiper-button-next-custom">
        <svg width="81" height="8" viewBox="0 0 81 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55.3536 4.35355C55.5488 4.15829 55.5488 3.84171 55.3536 3.64645L52.1716 0.464466C51.9763 0.269204 51.6597 0.269204 51.4645 0.464466C51.2692 0.659728 51.2692 0.976311 51.4645 1.17157L54.2929 4L51.4645 6.82843C51.2692 7.02369 51.2692 7.34027 51.4645 7.53553C51.6597 7.7308 51.9763 7.7308 52.1716 7.53553L55.3536 4.35355ZM0 4.5H55V3.5H0V4.5Z" fill="white" />
        </svg>
    </div>
</div>

<div class="arrows-block">

    <!-- Arrow left -->
    <div class="swiper-button-prev-custom">
        <svg width="56" height="8" viewBox="0 0 56 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55.3536 4.35355C55.5488 4.15829 55.5488 3.84171 55.3536 3.64645L52.1716 0.464466C51.9763 0.269204 51.6597 0.269204 51.4645 0.464466C51.2692 0.659728 51.2692 0.976311 51.4645 1.17157L54.2929 4L51.4645 6.82843C51.2692 7.02369 51.2692 7.34027 51.4645 7.53553C51.6597 7.7308 51.9763 7.7308 52.1716 7.53553L55.3536 4.35355ZM0 4.5H55V3.5H0V4.5Z" fill="white" />
        </svg>
    </div>

    <!-- Arrow right -->
    <div class="swiper-button-next-custom">
        <svg width="56" height="8" viewBox="0 0 56 8" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M55.3536 4.35355C55.5488 4.15829 55.5488 3.84171 55.3536 3.64645L52.1716 0.464466C51.9763 0.269204 51.6597 0.269204 51.4645 0.464466C51.2692 0.659728 51.2692 0.976311 51.4645 1.17157L54.2929 4L51.4645 6.82843C51.2692 7.02369 51.2692 7.34027 51.4645 7.53553C51.6597 7.7308 51.9763 7.7308 52.1716 7.53553L55.3536 4.35355ZM0 4.5H55V3.5H0V4.5Z" fill="white" />
        </svg>
    </div>
</div>
Метки: