CSS：按钮上有多个箭头

我想制作一个在右侧带有多个箭头的按钮，如下所示：

这是我所做的：https : //jsfiddle.net/aqjfLy7s/。我无法弄清楚如何使第一个箭头与按钮边框齐平。随后的所有箭头也必须遵循相同的模式。

.wrapper {
  width: 50%;
  border: 1px solid #ccc;
  padding: 50px 0px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.w1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: 30px;
}

.w2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  margin-right: 30px;
  background-color: #ffcc00;
  padding: 10px;
}

.btn {
  color: #000;
  border: 1px solid #000;
  border-right: none;
  padding: 0.5rem 1rem;
  width: 80%;
}

span {
  width: 1rem;
  height: 1rem;
  border: 0.25rem solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
  margin-left: -12px;
}

  

    Test
    
    
    
    
  
  
123

.box {
  display:inline-block;
  padding:10px;
  margin-right:60px;
  border:1px solid;
  border-right:none;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  margin-left:-1px;
  top:-1px;
  left:100%;
  bottom:50%;
  width:30px;
  background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/25% 100%;
  transform:skewX(45deg);
  transform-origin:top;
}
.box:after {
  transform:skewX(-45deg);
  transform-origin:bottom;
  bottom:-1px;
  top:50%;
}

  some text



  some long long text




  2 lines 
 text

.box {
  --b:4;
  display:inline-block;
  padding:10px;
  margin:5px;
  margin-right:calc(var(--b)*15px);
  border:1px solid;
  border-right:none;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  margin-left:-1px;
  top:-1px;
  left:100%;
  bottom:50%;
  width:calc(var(--b)*7.5px);
  background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/calc(100%/var(--b)) 100%;
  transform:skewX(45deg);
  transform-origin:top;
}
.box:after {
  transform:skewX(-45deg);
  transform-origin:bottom;
  bottom:-1px;
  top:50%;
}

  some text



  some long long text




  2 lines 
 text




  some long long text

.box {
  display:inline-block;
  padding:10px;
  margin-right:60px;
  border:1px solid;
  border-right:none;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  margin-left:-1px;
  top:-1px;
  left:100%;
  bottom:50%;
  width:30px;
  background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/25% 100%;
  transform:skewX(45deg);
  transform-origin:top;
}
.box:after {
  transform:skewX(-45deg);
  transform-origin:bottom;
  bottom:-1px;
  top:50%;
}

  some text



  some long long text




  2 lines 
 text