狼読

 
2020/03/02

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など、使用することで画面いっぱいや縦幅に応じた斜めの領域を設定することができるようになります。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年12月
 123456
78910111213
14151617181920
21222324252627
28293031  

Technology

category

©狼読