CSS ストライプ背景

<div class="tate samplebox"> //ここにクラスを指定
	<h2>ページのタイトル H2</h2>
	<p>ABCDEあいうえおかきくけこさしすせそた・・・いゆいぇよらりるれろ<br>
	ABCDEあいうえおかきくけこさしすせそたちつてと・・・やいゆいぇよらりるれろ</p>
</div>

.samplebox {
  height: 300px;
  margin: 2rem auto;
  padding: 2rem;
}

.samplebox.tate {
  background: linear-gradient(180deg, #d2b0d2 0%, #d2b0d2 50%, #afeeee 50%, #afeeee 100%);
	}

.samplebox.yoko {
  background: linear-gradient(90deg, #d2b0d2 0%, #d2b0d2 50%, #afeeee 50%, #afeeee 100%);
	}

.samplebox.naname {
  background: linear-gradient(45deg, #d2b0d2 0%, #d2b0d2 50%, #afeeee 50%, #afeeee 100%);
	}

.samplebox.naname2 {
  background: linear-gradient(135deg, #d2b0d2 0%, #d2b0d2 50%, #afeeee 50%, #afeeee 100%);
	}

.samplebox.stripe_tate {/*ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点, （ 色3 始点, 色3 終点, … ） */
  background: repeating-linear-gradient(to right, #d2b0d2, #d2b0d2 50px, #e1dede 50px, #e1dede 100px);
	}

.samplebox.stripe_yoko {
  background: repeating-linear-gradient(to top, #d2b0d2, #d2b0d2 10px, #e1dede 10px, #e1dede 50px);
	}

.samplebox.stripe_naname {
  background: repeating-linear-gradient(45deg, #d2b0d2, #d2b0d2 10px, #e1dede 10px, #e1dede 20px);
	}