skewを使用してnavigationをつくる

skewを使用してナビゲーションを作成する機会があったので備忘録として残しておこうと思います。

まずCSSのskewとは何か？
skewは要素を二次元平面上でゆがめることができるCSSです。

指定の方法は以下のような形になります。

.skew {
     transform: skew(0);
     transform: skew(15deg, 15deg);
     transform: skew(-0.06turn, 18deg);
     transform: skew(.312rad);
}

それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。

例えば以下のような形でCSSを作成すると平行四辺形を作成できます。

.skew {
    position: relative;
    &:before {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        transform: skewX(-30deg);
    }
}

これを利用してナビゲーションを作成してみました。

See the Pen
skew(left,right) by sayuri (@giraffeweb)
on CodePen.0

この場合、hoverすると左が右へ背景色が変わるように指定しています。

See the Pen
skew(bottom,top) by sayuri (@giraffeweb)
on CodePen.0

この場合は下から上です。
指定の仕方によっては、右から左、上から下も設定が可能です。

◆おまけ◆

リスト上の項目を階段状にすることもできます。

リスト自体はskewをかけてあげて、通常全体にskewをかけてしまうと中の要素も一緒に歪んでしまうので、中の要素がゆがまないように
中の要素自体にもskew[0]を指定してあげることで、階段状のリストを作成することができます。

See the Pen
by sayuri (@giraffeweb)
on CodePen.0

みなさんもぜひ試してみてください！

Share: