CSSで斜めの背景を実装する方法

2021.01.06
HTML&CSS

CSSだけで斜めの背景を実装する方法の備忘録です。

transform:skew を利用した方法

transformの「skewY」で背景を並行四辺形の形に変形させる方法です。

SAMPLE

<div>SAMPLE</div>

サンプルでは、見やすくするため「SAMPLE」の文字は消しています。

div {
  position: relative;
  z-index: 0;
}
div::after {
  content: '';
  position: absolute;
  left:0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 60%;
  background: #FF9F40;
  transform: skewY(5deg);
  transform-origin: top right;
}

擬似要素afterを、transformの「skewY」で傾けることで斜めの背景を作っています。（オレンジ色の背景の部分が擬似要素で作った背景です。）

transformの「skewY(5deg)」で斜めの角度を、transform-originの「top right」で傾斜の起点を設定しています。heightの「60%」で背景の大きさ（高さ）を変更できます。

傾きを変える場合

上記のサンプルでは左上がりだった背景の角度を、右上がりに変更して見ます。

SAMPLE

div {
  position: relative;
  z-index: 0;
}
div::after {
  content: '';
  position: absolute;
  left:0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 60%;
  background: #FF9F40;
  transform: skewY(-10deg);
  transform-origin: top left;
}

サンプルのようにtransformを「skewY(-10deg)」とすると、傾きが逆になり角度も大きくなります。傾きを逆にした場合、傾きの起点も左右逆になるようにtransform-originを「top left」に変更しています。

背景を2色設定する場合

擬似要素beforeを追加することで、背景色を増やすことができます。

SAMPLE

div {
  position: relative;
  z-index: 0;
}
div::before,
div::after {
  content: '';
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
}
div::before {
  z-index: -1;
  height:40%;
  background: #FF9F40;
  transform: skewY(5deg);
  transform-origin: top right;
}
div::after {
  z-index: -2;
  height:80%;
  background: #53B09A;
  transform: skewY(5deg);
  transform-origin: top right;
}

緑色の背景を追加しました。z-indexの値で重なる色の順番を設定しています。

borderを利用した方法

セクション間のborderで背景を斜めに見せる方法です。

SAMPLE

div {
  position: relative;
  z-index: 0;
}
div::after {
  content: '';
  position: absolute;
  left:0;
  bottom: 0;
  z-index: -1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 100vw ;
  border-color: transparent transparent transparent #FF9F40;
}

擬似要素afterのborderを斜めに色をつけてセクション間の境にすることで、背景を斜めにするテクニックです。

border-widthの「40px」が線の高さになります。値を大きくするほど傾斜が大きくなります。「100vw」で線が背景の横幅いっぱいになるように設定しています。横幅が固定の背景にする場合は、この値を「500px」などに変更します。
border-colorの値に「transparent（透過）」を合わせることで、線を斜めに色付けしています。

サンプルのセクションの下に、線と同じ色の背景のセクションが続くことで、背景が斜めになります。

background: linear-gradientを利用した方法

background: linear-gradientで背景のグラデーションを調整し、斜めの背景を設定する方法です。

SAMPLE

div {
  background: linear-gradient(5deg, #d6dcdb, #d6dcdb 50%, #FF9F40 50%);
}

「5deg」が角度です。「#d6dcdb, #d6dcdb 50%」で下半分の背景色、「#FF9F40 50%」で上半分の背景色を設定しています。linear-gradientは通常、グラデーションをつけるときに使用されますが、開始地点と終了地点を同じいろで設定すると単色で塗りつぶすことができます。

backgroundを使う方法であれば、擬似要素なしで背景に直接設定できますが、角度によってはジャギーが発生してしまいます。ジャギーが出てしまう場合は、「#d6dcdb 49.9%, #FF9F40 50%」のように、色の境の数値にわずかに差をつけてぼかすと改善されます、しかし、サイズや角度によっては、色の境がはっきりしないため、擬似要素が使えない場合などに代替案として使用します。

clip-pathを利用した方法

背景をclip-pathで斜めにクリッピング（切り抜き）する方法です。

SAMPLE

div {
  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  background-color: #FF9F40;
}

clip-pathで背景を含む要素全体を斜めにクリッピングしています。polygonの4つの値が、クリッピングする形の頂点を設定しています。例えば、二つ目の値「100% 25%」の「25%」を「50%」にすることで、右上の頂点が下に下がります。

clip-pathを使えば、画像を使用した背景も斜めにクリッピングすることができます。しかし、IEのように対応していないブラウザもあるため使用できる環境は限定されます。