斜めの背景をcssで作る方法

HTML/CSS

斜めの背景画像をcssでつくる時の記述例

cssで背景に斜めの画像を設置したい時の記述方法にはいろいろ考えられますが、擬似要素を使ったシンプルな記述例を何パターンか紹介します。
htmlは共通で下記のものを使用しています。

<div class="contents">
  <div class="contents_inner">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
  </div>
</div>

平行四辺形タイプ

画像の上側と下側の両方が斜めになった平行四辺形タイプ
cssの斜め背景画像例1

cssの記述例(位置や高さは適宜変更して下さい)

.contents {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.contents::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -10%;
  width: 120%;
  height: 300px; /* 高さを指定 */
  background: #1D6BDE;
  transform-origin: left center;
  transform: rotate(10deg);
  z-index: -1;
}

.contents_inner {
  width: 60%;
  margin: 0 auto;
  padding: 450px 10px 120px;
  color: #fff;
  text-align: center;
}

台形タイプ

画像の上側だけが斜めになった台形タイプ
cssの斜め背景画像例2

cssの記述例

.contents {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.contents::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -10%;
  width: 120%;
  height: 100%; /* ここだけ変更しています */
  background: #1D6BDE;
  transform-origin: left center;
  transform: rotate(10deg);
  z-index: -1;
}

.contents_inner {
  width: 60%;
  margin: 0 auto;
  padding: 450px 10px 120px;
  color: #fff;
  text-align: center;
}

背景を二つ重ねる

前に紹介した台形の背景画像を二つ重ねたタイプ
cssの斜め背景画像例3

cssの記述例

.contents {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.contents::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -10%;
  width: 120%;
  height: 100%;
  background: #1D6BDE;
  transform-origin: left center;
  transform: rotate(10deg);
  z-index: -1;
}

.contents::after { /* もう一つ擬似要素を追加 */
  content: '';
  position: absolute;
  top: 45%;
  left: -10%;
  width: 120%;
  height: 100%;
  background: #96CBF1;
  transform-origin: left center;
  transform: rotate(-5deg);
  z-index: -2;
}

.contents_inner {
  width: 60%;
  margin: 0 auto;
  padding: 450px 10px 120px;
  color: #fff;
  text-align: center;
}

背景写真などを斜め画像で切る

他の要素の背景画像と重ねることで斜めに切り取られた背景画像をつくる時の例

cssの斜め背景画像例4

htmlの記述例

<div class="main"></div>
	
<div class="contents">
  <div class="contents_inner">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
  </div>
</div>

cssの記述例

.main {
  height: 500px;
  background-image: url(https://web-saku.net/wp-content/uploads/2020/03/street.jpg);
  background-size: cover;
}

.contents {
  position: relative;
  top: -310px;
  z-index: 1;
  overflow: hidden;
  width: 100%;
}

.contents::before {
  content: '';
  position: absolute;
  top: 30%;
  left: -10%;
  width: 120%;
  height: 100%;
  background: #1D6BDE;
  transform-origin: left center;
  transform: rotate(5deg);
  z-index: -1;
}

.contents_inner {
  width: 60%;
  margin: 0 auto;
  padding: 350px 10px 120px;
  color: #fff;
  text-align: center;
}

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください