html - 在盒子中间的CSS中制作箭头

Question

我有以下应用于我的 div 的 css 类。

.rightarrow{
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 20px;
        border-color: transparent transparent transparent #aaaaa9;
    }

下面是我的标记:

<!-- Tabs -->
<div id="tabs">
   <!-- tabs start  -->
   <div class="tab-content">
      <!-- part 1 Will execute 2 times as  per filters-->
      <div role="tabpanel" class="tab-pane active" id="volkswagen">
         <div class="row">
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 1</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 2</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 3</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 4</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- End part 2 -->
</div>
</div>
<!-- ./Tabs -->

我得到低于结果。

此外，当前应用的样式是:

我希望这些箭头位于这些矩形框之间的中间。我怎样才能做到这一点？

谢谢

@Irina:这是添加您提供的样式后的输出结果。

Answer 1

如果您将箭头元素创建为伪元素，那么使用它很容易操作。请检查一个例子:

.col-xs-5ths:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -28px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #aaaaa9;
  transform: translateY(-50%);
}
.col-xs-5ths {
  width: 20%;
  float: left;
  margin: 0 20px;
  padding: 10px;
  background: #ccc;
  min-height: 100px; /* just for demo */
  position: relative;
}

<div class="col-xs-5ths">test test test</div>    
<div class="col-xs-5ths">test</div>
<div class="col-xs-5ths">test test</div>  

编辑:请尝试以下新版本:

.col-xs-5ths:nth-of-type(1):after,
.col-xs-5ths:nth-of-type(2):after,
.col-xs-5ths:nth-of-type(3):after,
.col-xs-5ths:nth-of-type(4):after {
  content: '';
  position: absolute;
  top: 50%;
  right: -31px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #aaaaa9;
  transform: translateY(-50%);
}
.col-xs-5ths {
  width: calc(20% - 40px);
  float: left;
  margin: 10px 20px;
  padding: 10px;
  background: #ccc;
  min-height: 100px; /* just for demo */
  position: relative;
}

<!-- I've included bootstrap 3 css, not sure what version you have -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Tabs -->
<div id="tabs">
   <!-- tabs start  -->
   <div class="tab-content">
      <!-- part 1 Will execute 2 times as  per filters-->
      <div role="tabpanel" class="tab-pane active" id="volkswagen">
         <div class="row">
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 1</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 2</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 3</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 4</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 5</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 6</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 4</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
            <div class="col-xs-5ths ">
               <div class="light-text-box">
                  <h4>Test 7</h4>
               </div>
               <div class="dark-box-outer">
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- End part 2 -->
</div>
<!-- ./Tabs -->