【CSS】背景を斜めに配置してデザインする方法

背景を斜めに配置したデザインでは、躍動感があり、インパクトがでやすくなります。

普段、WEBデザイン業務をしていていつも同じような背景の作り方をしている際に、こうした斜めの背景の配置をしていくとマンネリ脱出にもなりそうで良いかもですね。

という訳で、今回は背景を斜めに配置したデザインを実装する方法をご紹介したいと思います！

CSSプロパティ「skewY」で背景を斜めにします

背景を斜めにするにはcssプロパティの「skewY」というプロパティを使用して背景を斜めにしていきます。

まずは以下のHTMLを用意します。

<div class="box_parent">
  <div class="box_child">
    <p>ダミーテキストダミーテキスト</p>
  </div>
</div>

次に上記のHTMLをCSSで背景を斜めにしていきます。
以下のCSSを記述していきます。

.box_parent{
  position: relative;
  width: 100%;
  margin: auto;
  padding: 60px 0;
}

.box_parent:before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: navy;
  transform: skewY(-5deg);
  z-index: -1;
}

.box_child{
  backgound: #fff;
  width: 70%;
  margin: 0 auto;
}

実行結果

上記のHTMLとCSSで、以下のような実行結果になれば完了です。

まとめ

CSSで背景を斜めに配置してデザインする方法についてご紹介いたしましたが、いかがだったでしょうか？

もし、WEB制作などでデザインがマンネリ気味になっている場合や、デザインに躍動感やインパクトを出したい時には、こうしたアイディアがあると便利かもしれません。

ご興味のある方は是非一度お試しください！