最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。

斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。

デモ

つまりはこんな感じのやつです↓

DEMO PAGE

大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。

実装方法

色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。

HTML

<section class="contents">
    <div class="contents_inner">
      <!-- ここはコンテンツ -->
    </div>
</section>

※HTMLは該当部分のみ(bodyタグとかは省略)

CSS

.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0;
  padding: 80px 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #011931;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #fff;
  text-align: center;
}

※上記CSSには直接関係がない部分(colorとか)も記載しています。

簡単な解説とか

section全体を傾斜させていますが、擬似要素を使っているので、セクション内のテキストは当然ながら、傾斜せず普通に表示されています。

コンテンツ部分(.contents__inner)のテキスト量(高さ)が十分でない場合は、高さをpxで直接指定してあげたほうがいいかもしれません。または、擬似要素(.contents:before)の高さ(height)および傾き(transform:rotate)の値を調整すればいいと思います。

ポイントは、widthを120%にして.contentsにoverflot:hiddenを与え、ネガティブマージンで中央へもっていっているところと、擬似要素の高さを80%にしているところでしょうか。やってみると分かりますが、高さを100%にすると下部が直線になります(見切れるためと思われる)。

あと、before擬似要素へのz-index:-1は必須です。

傾斜を逆にしたバージョン

DEMO PAGE

傾きを逆にしたバージョンです。HTMLは同じで、擬似要素のrotateとoriginを変更するだけ。位置調整の為にmarginもやや修正しています。

CSS

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 2% -10% 0;
  background: #011931;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}

rotateだけ変更しても切れてしまったりして形がおかしくなるので、変形の基準点(transform-origin)を左センター(left center)から右センター(right center)に変更しています。

斜めの背景を2つ作って交差させたバージョン

DEMO PAGE

単純に背景が斜めだと、ちょっと違和感というか見づらくなるので、斜めの背景を2つ作って交差するようにしてみました。これだと違和感がなくなって、デザイン的にも使いやすくなるんじゃないかなと思います、個人的に。

この場合もHTMLは同じで、.contentsにafter擬似要素を新たに追加して表現しています。

CSS

.contents:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #df6209;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -2;
}

after擬似要素のz-indexの値を-2にして、before擬似要素と上下で交差するようにしています。

微妙な調整を施すことで、色々と変化を加えることができるので、アシンメトリーなデザインとかにも使えそうです。

レスポンシブにする場合は、擬似要素の高さを各ブレイクポイントで変化させてあげるといいかと思います。

なお、そんなに珍しいことはやってないので、最新のブラウザであれば問題なく表示されると思います。IE9でも表示されました。