シェブロンの矢印の角度を小さくしますか？

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