Create border arrow with css

Question

So I got a sketch of a designer I worked with and was wondering how I create the border arrows in the picture below

Answer 1

In case it is needed for others here is another solution, that can work as the requested answer, but will work if there is a need of separation of the elements.

Using the above examples, what will happen is that the background must always remain the same color. Like this it will always have a separation thus transparency between items.

Hope this helps, this post really helped me to find this solution :)

.items--container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 1rem;
  width: 150px;
  height: 50px;
}

.item.active .content {
  color: #FFFFFF;
}

.item.active .arrow {
  background: #d68a3a;
}

.content {
  color: #000000;
  position: absolute;
  z-index: 2;
}

.arrow {
  width: 100%;
  height: 50%;
  background: #FFFFFF;
}

.arrow.top {
  transform: skew(45deg, 0deg);
  border-left: 1px solid #d68a3a;
  border-right: 1px solid #d68a3a;
  border-top: 1px solid #d68a3a;
}

.arrow.bottom {
  transform: skew(-45deg, 0deg);
  border-left: 1px solid #d68a3a;
  border-right: 1px solid #d68a3a;
  border-bottom: 1px solid #d68a3a;
}

  

    

    
Menu Item 1
    

  
  

    

    
Menu Item 2
    

  
  

    

    
Menu Item 3
    

  
  

    

    
Menu Item 4