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邊框

回答

相關問題