CSSで背景を斜めにする。

一瞬で背景を斜めにします。
デモ: https://codepen.io/tt113/pen/XWdVGbL?editors=1100

実装

html

<div class="box">

</div>

css

.box {
  height: 600px;
  background: linear-gradient(
    175deg, #fac700 52%, #1394CF 52%);
}

結果

解説

cssにはlinear-gradient関数というグラデーションを生成する関数があり、それを使って実装している。

引数の指定方法は様々だが、今回は１つ目の引数(175deg)はグラデーションの角度、

2つ目・3つ目の引数はグラデーションの色、始まる位置を指定している。

参考文献

• linear-gradient() - CSS: カスケーディングスタイルシート | MDN