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 に入れる角度。ここをマイナスにすると右に傾いた平行四辺形になり、プラスにすると左の傾いた平行四辺形になる。
