CSS

transform: skewを利用した斜めに傾いたグローバルナビゲーションの作り方

ひさしぶりにCSSの小ネタを紹介します。

CSS3のtransformを利用して、斜めに傾いているグローバルナビゲーションを作ります。

とりあえず↓のcodepenのデモをご覧ください。

See the Pen transform: skewを利用した斜めに傾いたグローバルナビゲーションの作り方 by jugedred (@jugedred) on CodePen.

作り方はすごく簡単です。

まずHTMLを↓のように書きます。

HTMLではリストタグを横並びに並べるコードを書くだけです。
そしてCSSはこちら

ポイントは親要素である li .innerをtransform:skewX(150deg);をつかって150deg傾けたあと、小要素であるspanタグを逆方向に150deg傾けます。つまり skewX(-150deg);を記述します。小要素を逆方向に傾けないと、先に記述した親要素に引きづられて文字まで傾いてしまうからです。ブロック要素にしたアンカータグを傾けたあとで、中に記述してある文字を逆に傾けて、傾きを打ち消すイメージですね。この考え方はCSS3でいろいろな事をするときに使えますよ!

スポンサーリンク

以上です。ちょっと斜めに傾けておしゃれなグローバルナビゲーションを作るときに使ってくださいね。

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事