在方框中间的CSS中制作箭头

Question

我有下面的CSS类，该类适用于我的div。

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