斜めのデザイン、流行っていますよね。いろいろな実装方法がありますが、柔軟で使いやすい、疑似要素を使ったSassのコードを考えてみました。 最近、Webサイト制作でデザインガイドラインの一部としてティルト角(tilted angle)を頻繁に使う必要がありました。この記事で「ティルト角」とは、次のように(Webページの)上か下の辺が完全に水平ではなく少し傾斜している部分を指すものとします。 ティルト角の実装方法はたくさんあります。base64でエンコードした画像を背景に適用して(カラーや角度などの)カスタマイズで大変な思いをした経験があるかもしれません。 positionをabsoluteに指定した疑似要素(pseudo-element)にskew(ゆがみ)やrotate(回転)を適用する方法もありますが、形がゆがんで(skew transform)しまうので、これも避けたいことの1つです。
![最近流行の斜めのデザインをSassで実装する理想的なコードを考えてみた!](https://cdn-ak-scissors.b.st-hatena.com/image/square/eca4094d4cbd708fcef75700fe54dd56ba5cfabe/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2022%2F07%2F28%2F2446577%2Fl%2Fe1f075239eb081d7.jpg)