2个箭头内的CSS边框

Question

我正在尝试在2个箭头（左侧和右侧）中创建边框。

屏幕截图 -

2个箭头之间有一条线。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

线条从箭头顶部绘制并延伸到跨度的高度。如果可能，请告诉我。

非常感谢任何帮助。

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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课程中添加 border-right 属性，并且margin-right值与padding-right相同，以使箭头之间的中心边界

  

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;