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でいろいろな事をするときに使えますよ!

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

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

CSS | Posted on 2016/03/28 20:38

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です