减少雪佛龙箭头的角度？

Question

在这里，我有用于雪佛龙箭头的CSS（或实际上是scss）。

$itemHeight: 40px; 

.statusBar { 
    display: flex; 

    &_item { 
     display: inline-block; 
     background: red; 
     height: $itemHeight; 
     position: relative; 
     flex-grow: 1; 

     text-align: center; 
     line-height: $itemHeight; 

     &:before, 
     &:after { 
      display: inline-block; 
      content: ""; 
      border-style: solid; 
      position: absolute; 
     } 
     &:before { 
      left:0; 
      border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/2; 
      border-color: transparent transparent transparent #f2f2f2; 
     } 
     &:after { 
      right:0; 
      border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/2; 
      border-color: #f2f2f2 transparent; 
     } 

    } 

} 

组成箭头的角度和90度箭头的羽毛。我如何修改CSS使其成为45度？

Answer 1

&:before { 
    left:0; 
    border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/4; 
    border-color: transparent transparent transparent #f2f2f2; 
} 
&:after { 
    right:0; 
    border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/4; 
    border-color: #f2f2f2 transparent; 
} 

CodePen