<div class="container">
<h2>背景と線が等幅のストライプ</h2>
<ul class="flex">
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 1</p>
		<div class="box stripe1">
		</div>
	</li>
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 2</p>
		<div class="box stripe2">
		</div>
	</li>
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 3</p>
		<div class="box stripe3">
		</div>
	</li>
</ul>

<h2>細い線のストライプ</h2>
<ul class="flex">
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 1</p>
		<div class="box stripe1-1">
		</div>
	</li>
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 2</p>
		<div class="box stripe2-1">
		</div>
	</li>
	<li class="md:w-1/3 w-full p-4">
		<p>Stripe 3</p>
		<div class="box stripe3-1">
		</div>
	</li>
</ul>
</div>

.container {
	width: min(calc(100% - 2rem), 1000px);
	margin: 2rem auto;
}
.box {
	width: 100%;
	min-height: 200px;
}
.stripe1 {
	background-color: #FFD3FA;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, #D601FF 10px, #D601FF 20px );
}
.stripe1-1 {
	background-color: #FFD3FA;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, #D601FF 15px, #D601FF 16px);
}
.stripe2 {
	background-color: #FFD3FA;
	background-image: linear-gradient(90deg, transparent 50%, #D601FF 50% );
	background-size: 20px 20px;
}
.stripe2-1 {
	background-color: #FFD3FA;
	background-image: linear-gradient(90deg, transparent 95%, #D601FF 95% );
	background-size: 20px 20px;
}
.stripe2-2 {
	background-color: #FFD3FA;
	background-image: linear-gradient(90deg, transparent, transparent 10px, #D601FF 10px, #D601FF 20px );
}
.stripe3 {
	background-color: #FFD3FA;
	background-image: linear-gradient(0deg, transparent 50%, #D601FF 50%);
	background-size: 20px 20px;
}
.stripe3-1 {
	background-color: #FFD3FA;
	background-image: linear-gradient(0deg, transparent 95%, #D601FF 95%);
	background-size: 20px 20px;
}