根据矩形的大小更改div中的箭头

Question

我有一个以下过程栏，是根据在线资源改编而成的。但是，当内部矩形如代码段所示更改其大小时，div中的箭头部分不会更改其大小。我该如何解决（使箭头部分根据矩形div更改其大小）？

非常感谢您的帮助。 谢谢。

i {
  padding-left: 5px;
}
#owner,#approved{
  border: 3px solid white;
  background-color:#35fb22;
  margin: 0 0 10px 10px;
}
.nav-tabs.wizard {
  background-color: transparent;
  padding: 0;
  width: 100%;
  margin: 1em auto;
  border-radius: 0.25em;
  clear: both;
  border-bottom: none;
}

.nav-tabs.wizard li {
  width: 100%;
  float: none;
  margin-bottom: 3px;
}

.nav-tabs.wizard li > * {
  position: relative;
  padding: 1em 0.8em 0.8em 2.5em;
  color: #999999;
  background-color: #dedede;
  border-color: #dedede;
}

.nav-tabs.wizard li.completed > * {
  color: #fff !important;
  background-color: #96c03d !important;
  border-color: #96c03d !important;
  border-bottom: none !important;
}

.nav-tabs.wizard li.active > * {
  color: #fff !important;
  background-color: #2c3f4c !important;
  border-color: #2c3f4c !important;
  border-bottom: none !important;
}

.nav-tabs.wizard li::after:last-child {
  border: none;
}

.nav-tabs.wizard > li > a {
  font-size: 15px;
}

.nav-tabs.wizard a:hover {
  color: #fff;
  background-color: #2c3f4c;
  border-color: #2c3f4c;
}

@media (min-width: 480px) {
  .nav-tabs.wizard li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0;
    width: 19.6%;
    float: left;
    text-align: center;
  }
  .nav-tabs.wizard li.active a {
    padding-top: 15px;
  }
  .nav-tabs.wizard li::after,
  .nav-tabs.wizard li > *::after {
    content: "";
    position: absolute;
    top: 0%;
    left: 100%;
    width: 0;
    border: 45px solid transparent;
    border-right-width: 0;
    border-left-width: 30px;
  }
  .nav-tabs.wizard li::after {
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #fff;
    margin: 0;
  }
  .nav-tabs.wizard li > *::after {
    z-index: 2;
    border-left-color: inherit;
  }
  .nav-tabs.wizard > li:nth-of-type(1) > a {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .nav-tabs.wizard li:last-child a {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .nav-tabs.wizard li:last-child {
    margin-right: 0;
  }
  .nav-tabs.wizard li:last-child a:after,
  .nav-tabs.wizard li:last-child:after {
    content: "";
    border: none;
  }
  span.nmbr {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tabbable">
  <ul class="nav nav-tabs wizard">
   
    <li><a href="#stateinfo" data-toggle="tab" aria-expanded="false"><b>IMPLEMENT</b>
      <i class="fas fa-file-signature"></i>
      <div id="owner" style="margin-top:5px;">Owner Name</div>
       
      </a></li>
    <li><a href="#companydoc" data-toggle="tab" aria-expanded="false">
      
      <b>Step 04</b>
      <div id="owner" style="margin-top:5px;">Owner Name</div>
    
      </a></li>
    <li><a href="#finish" data-toggle="tab" aria-expanded="true">
      
      <b id="status">FINAL</b>
     
      <div style="margin-top:5px;" id="approved">
    
      APPROVED
      
      <span class="
                   glyphicon glyphicon-ok"></span></div>
      </a></li>

  </ul>