cssを使って背景を斜めにしてみよう

今回は、cssを使って、背景を斜めになるブロックを作り方をご紹介したいと思います。
紹介内容は以下の通りです。

上記の構成でご紹介したいと思います。

htmlの構造のご紹介

htmlの構造はシンプルにしたいと思います。
下記のようにdivタグを一つのみで今回は斜めになるブロックをご紹介します。

<div class="naname_box"></div>

次はこちらの naname_boxクラスにcssを当てていきたいと思います。

cssのご紹介

cssの考え方についてご紹介します。考え方は、非常にシンプルです。
まず、四角いボックスをcssで作ります。
ここで非常に大事になってくるのが、beforeの要素を、この先ほど作った四角形の上に載せることで斜めのブロックを作ることで見かけ上消すという考え方です。
作成過程を順にご紹介していきたいと思います。

.naname_box{
 width:200px;
 height:200px;
 background:#ccc;
}

まずは上記のようにcssを記述して、height:200pxで横幅200pxのボックスを作ります。作った結果が次のようになります。

このままでは、斜めのブロックがないので、before要素で斜めの要素を作りたいと思います。

<style>
.naname_box{
 width:200px;
 height:200px;
 background:#ccc;
 position:relative;
}
.naname_box:before{
 content:"";
 display:inline-block;
 box-sizing:border-box;
 border-width:0 200px 50px 0;
 border-style:solid;
 border-color:transparent #fff transparent transparent;
 position:absolute;
}
</style>
<div class="naname_box"></div>

斜めを入れた際のサンプル実装例

上記の通りに、beforeの要素にborderを使うことで、斜めになるボックスを重ねることで背景を斜めにすることができます。

まとめ

今回のサンプルでは、横幅と縦幅が決まったものでサンプルを作らせていただいておりますが、横幅いっぱいとか縦幅の何％みたいに設定したい場合は、border-widthのところを100vwや20vhなど、使用することで画面いっぱいや縦幅に応じた斜めの領域を設定することができるようになります。