【CSS】背景を斜めにする（備忘録）

※あくまでも自分の備忘録用であり、お役に立たない場合やブラウザによって綺麗に斜め背景にならない場合があります。あらかじめご了承ください。

完成イメージ

使用の意図

-躍動感を出す、デザインセンス向上のため。
-若者向けやビジネス系に多い印象。

作り方

擬似要素（::beforeもしくは::after）で図形を作って、背景に覆うように配置する。

コード

HTML

qiita.rb

<div class="contents">
    <h2>Contents</h2>
    <div class="card-contents"></div>
</div>

CSS

qiita.rb

    .contents {
      max-width: 960px;
      margin: 0 auto;
      padding: 60px 20px 20px;
      overflow: hidden;
      position: relative;
      background: rgba(26,161,230,.25);
    }

    .contents h2 {
      margin: 200px auto 0;
      text-align: center;
    }

    .contents-inner {
      max-width: 340px;
      margin: 0 auto 20px;
      position: relative;
    }

    .contents-inner {
      position: absolute;
      top: -416px;
      left: -300px;
      -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
      width: 400%;
      height: 200px;
      background: #fff;
      content: "";
    }

最後に

これを作った後に回転で図形を作って覆う方法はよくないと書いてありました。（おそらく臨機応変さにかけるという意味）
参照
一つの方法としてこういう作り方もあるよということで、残しておきます。