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

更新日:2022年02月25日 /  投稿日:2022年03月4日

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

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

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

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

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら