2个箭头内的CSS边框

我想在2个箭头（左右）内创建一个边框。2个箭头内的CSS边框

截图 -

有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>

线从箭头的顶部平延伸直到向跨度的高度。请让我知道这是否可能。

任何帮助，高度赞赏。

来源

2017-02-17 Prithviraj Mitra

.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>

来源

2017-02-17 09:40:57 arturmoroz

辉煌。没有考虑背景的位置。好一个。非常感谢。 –

这可能帮助你

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; 
}

来源

2017-02-17 09:40:47 amansoni211

要做到这一点，你要居中与填充足够量的两块元素，然后只需添加边界到其中之一。

.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>

来源

2017-02-17 09:52:47

您需要添加右边框财产.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>

来源

2017-02-17 10:00:16

2个箭头内的CSS边框

回答

相关问题