はじめに

今年やった案件で勉強になった小技？があるので、それを紹介したいと思います。
個人的には考え方が勉強になりました。

どんなデザインだったのか

め、めちゃナナメです・・・！
私「でもまあ、transform: skewY();で変形いいんでしょ」
transformプロパティの値に指定出来る"skew"とは、「要素を傾斜変形させる」ことが出来ます。
ちなみに「スキュー」と読むそうです。かわいい。＼ｽｷｭｰ!／
transformプロパティで出来ることについてもまとめましたが、それは後述しますね。

実践！

See the Pen qiita_2020_01 by tomizon (@tomizon) on CodePen.

ほら出来たじゃん！
…あ、あれ？
そうか、そりゃ文字文字くん（モジモジくんです。世代がバレる。）も傾くよな…確かに、そりゃそうだ。。。
そして、小さい脳みそで考えました、私。

閃いた！

文字エリアの傾きを戻せばいいんじゃん！

See the Pen qiita_2020_02 by tomizon (@tomizon) on CodePen.

出来ました！やったー！
ここで大切なのは、傾斜角度の値を0にするのではなく傾けた分戻す、ということです。

まとめ

今回で言うと外の.wrapには背景色のみで何もせず（paddingや幅などはありますが）、.innerのエリアで傾ける。そして.boxで傾けた分だけ戻す、ということです。
あんまりやったことがないデザインだったので初見はビックリしましたが、検索したり相談したりしつつ表示することが出来ました。ありがとうございます！

余談

そして、今回この記事を書くにあたり、色んなこと出来過ぎるtransformプロパティについても、まとめてみました。
改めてみると、色々形を変形したりクルクルしていきますね・・・。

関数	変形効果	2D（XY方向）	3D（XYZ方向）
translate	移動	○	○
rotate	回転	○	○
scale	伸縮	○	○
skew	傾斜	○	-

正直結構迷うのでｗ、今度はtransformプロパティについての違いの詳細について、まとめてみようと思います！

最後までお読みくださり、ありがとうございました。

参考：
カスケーディングスタイルシート | MDN