<div class="container">
  <h1>background: linear-gradient(任意のdeg, blue 50%, red 50%); の例</h1>
  <div>
    <h2>0deg (= to top)</h2>
    <div class="box deg0"></div>
  </div>
  <div>
    <h2>45deg</h2>
    <div class="box deg45"></div>
  </div>
  <div>
    <h2>90deg (= to right)</h2>
    <div class="box deg90"></div>
  </div>
  <div>
    <h2>135deg</h2>
    <div class="box deg135"></div>
  </div>
  <div>
    <h2>180deg (= to bottom)</h2>
    <div class="box deg180"></div>
  </div>
  <div>
    <h2>225deg</h2>
    <div class="box deg225"></div>
  </div>
  <div>
    <h2>270deg (= to left)</h2>
    <div class="box deg270"></div>
  </div>
  <div>
    <h2>315deg</h2>
    <div class="box deg315"></div>
  </div>
</div>

body {
  font-family: sans-serif;
}

.container > * + * {
  margin-top: 4rem;
  text-align: center;
}

h1 {
  font-size: 1.5rem;
  text-align: center;
}

.box {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

.deg0 {
  background: linear-gradient(0deg, blue 50%, red 50%);
}

.deg45 {
  background: linear-gradient(45deg, blue 50%, red 50%);
}

.deg90 {
  background: linear-gradient(90deg, blue 50%, red 50%);
}

.deg135 {
  background: linear-gradient(135deg, blue 50%, red 50%);
}

.deg180 {
  background: linear-gradient(180deg, blue 50%, red 50%);
}

.deg225 {
  background: linear-gradient(225deg, blue 50%, red 50%);
}

.deg270 {
  background: linear-gradient(270deg, blue 50%, red 50%);
}

.deg315 {
  background: linear-gradient(315deg, blue 50%, red 50%);
}