减少雪佛龙箭头的角度？

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