斜めデザインをしたくなった時に使えるかもしれないTips
背景画像を使わずにCSSのみで、斜め真っ二つな画面を作る方法です。

HTML

<body>
  <div class="wapper">
    <div class="top"></div>
    <div class="bottom"></div>
</body>

CSS

冗長な書き方ですが、
下記設定でこんな感じに画面いっぱいに斜め真っ二つデザインができます。

body,div{
    margin: 0;
    padding: 0;
}
.wapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.top {
    background-color: #ff0000;
    width: 100%;
    height: 50%;
}
.top:after {
    background-color: #ff0000;
    content: '';
    display: block;
    left: -50%;
    top: 0%;
    width: 200%;
    height: 50%;
    overflow: hidden;
    position: absolute;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.bottom {
    background-color: #0000ff;
    width: 100%;
    height: 50%;
}
.bottom:before{
    background-color: #0000ff;
    content: '';
    display: block;
    width: 200%;
    height:50%;
    left: -50%;
    top:50%;
    position: absolute;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

補足

.wapper で画面全体にスペース作成
.top .bottomで50%ずつ面積を確保
before,after属性を使って斜めに要素を作成（この時、斜めにする分widthが足りなくなるのでだいたい2倍くらいのサイズをとる）
before,afterで作った要素を普通にはると、隅の四角が出てしまうのでleftで左にひっぱって隠す

所感

表示ディスプレイが大きいと端が切れる
斜めの角度を変えた時に調整が面倒（かも)
使いドコロはあんまりなさそう?

参考サイト

css脱初心者？ :before :after擬似要素の使い方とか基本的なこと
 CSSのみで背景を全体的に斜めにして傾斜をつける方法

CSSのみで斜めラインデザイン実装

HTML

CSS

補足

所感

参考サイト