CSSで平行四辺形の要素を作る（transformで角度を設定する）

CSS で平行四辺形の要素を作るには、平行四辺形にしたい要素の before に transform を設定する。

.header__category ul li {
    margin-right: 12px;
    padding: 12px 16px;
    position: relative;
}

.header__category ul li:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: skewX(-15deg);
    background-color: #f0f0f0;
    border-radius: 8px;
    content: "";
}

ポイントは transform の skewX に入れる角度。ここをマイナスにすると右に傾いた平行四辺形になり、プラスにすると左の傾いた平行四辺形になる。