CSS граница в пределах 2 стрелок

Question

Я пытаюсь создать границу в пределах 2 стрелок (влево и вправо).

Скриншот -

Существует линия между 2 стрелками.

.carousel-controls { 
 
    float: right; 
 
    width: 50%; 
 
    padding-top: 1rem; 
 
    padding-right: 1rem; 
 
} 
 

 
.carousel-controls span.next { 
 
    background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat; 
 
    width: 16px; 
 
    height: 10px; 
 
} 
 

 
.carousel-controls span { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.carousel-controls span.prev { 
 
    background: url(https://s16.postimg.org/dx0m87tud/prev.png) no-repeat; 
 
    width: 16px; 
 
    height: 45px; 
 
    padding-right: 3rem; 
 
}

<div class="carousel-controls"> 
 
    <span class="prev"></span> 
 
    <span class="next"></span> 
 
</div>

Линия тянет из верхней части стрелы и простирается до до высоты пролета. Пожалуйста, дайте мне знать, если это возможно.

Любая помощь очень ценится.

Answer 1

.carousel-controls { 
 
    float: right; 
 
    width: 50%; 
 
    padding-right: 1rem; 
 
} 
 

 
.carousel-controls span { 
 
    float: left; 
 
    width: 16px; 
 
    height: 45px; 
 
} 
 

 
.carousel-controls span.next { 
 
    background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat 100% 50%; 
 
    padding-left: 1.5rem; 
 
} 
 

 
.carousel-controls span.prev { 
 
    background: url(https://s16.postimg.org/dx0m87tud/prev.png) no-repeat 0% 50%; 
 
    padding-right: 1.5rem; 
 
    border-right: 1px solid gray; 
 
}

<div class="carousel-controls"> 
 
    <span class="prev"></span> 
 
    <span class="next"></span> 
 
</div>

Answer 2

это может помочь вам

Codepen link

.carousel-controls span.next { 
    background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat; 
    width: 16px; 
    height: 45px; 
    margin-left: 1.5rem; 
    background-position: 0 50%; 
} 

.carousel-controls span.prev { 
    background: url(https://s10.postimg.org/hdeqo479l/snext.png) no- repeat; 
    width: 16px; 
    height: 45px; 
    padding-right: 1.5rem; 
    background-position: 0 50%; 
    border-right: 1px solid #000; 
} 

Answer 3

Чтобы сделать это, вы хотите отцентрировать два блока элементов с достаточным количеством заполнения, а затем просто добавить граничит с одним из них.

.carousel-controls { 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.carousel-controls span { 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 10px; 
 
    position: absolute; 
 
    padding: 1rem; 
 
    width: 16px; 
 
} 
 

 
.carousel-controls span.next { 
 
    background-image: url(https://s10.postimg.org/hdeqo479l/snext.png); 
 
    border-left: 1px solid #666; 
 
    left: 50%; 
 
} 
 

 
.carousel-controls span.prev { 
 
    background-image: url(https://s16.postimg.org/dx0m87tud/prev.png); 
 
    right: 50%; 
 
}

<div class="carousel-controls"> 
 
    <span class="prev"></span> 
 
    <span class="next"></span> 
 
</div>

Answer 4

Вам нужно добавить границы прямо недвижимость в .prev класса и margin-right значение будет такой же, как padding-right к центру границы между стрелками

margin-right: 3rem; border-right: 1px solid #000;

.carousel-controls { 
 
    float: right; 
 
    width: 50%; 
 
    padding-top: 1rem; 
 
    padding-right: 1rem; 
 
} 
 

 
.carousel-controls span.next { 
 
    background: url(https://s10.postimg.org/hdeqo479l/snext.png) no-repeat; 
 
    width: 16px; 
 
    height: 10px; 
 
} 
 

 
.carousel-controls span { 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.carousel-controls span.prev { 
 
    width: 16px; 
 
    height: 45px; 
 
    margin-right: 3rem; 
 
    padding-right: 3rem; 
 
    border-right: 1px solid #000; 
 
}

<div class="carousel-controls"> 
 
    <span class="prev">&#8592;</span> 
 
    <span class="next">&#8594;</span> 
 
</div>