如何使用html和css在两个div之间放置箭头

我必须在两个之间放箭头div.下面是一个示例图像,以便您可以得到正确的想法:

这就是我目前所拥有的:

  


        

            

                

                    Normal Pay Cycle
                    

                        
TimeClock Rapid Entry
                        
Hours Worked
(Approve Hours)
                        
Pay Employee
                        
Pay Taxes Owed
                    
                
            
            

                

                    Common Report
                    

                        
Employer's Tax Total
                        
Hours Worked
                        
Employee Report

                        
TimeClock Hours Worked
                        
Hours Worked 132 Col
                        
Schedule of Checks Printed
                    
                
            
        
        

            

                Maintain Employees
                

                    
Add Employee
                    
Details

                    
Payrate
                    
Note

                    
Taxes
                    
Accrual

                    
Deductions
                    
Delete
                
            
        
    

使用上面的HTML代码我想创建下面的视图.这应该清楚地说明我想要什么.

您可以为此使用伪元素,例如:after行和:before三角形.要定位,您可以使用箭头position: absolute与transform: translate()

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 10px 25px;
  border: 1px solid black;
  margin: 0 25px;
  position: relative;
}
li:not(:last-child):after {
  content: '';
  height: 1px;
  background: black;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 50%;
}
li:not(:last-child):before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  right: -50px;
  transform: translateY(-50%);
}

  
Li
  
Li
  
Li
  
Li