背景に使えるストライプ・ボーダー柄をCSSでつくります。
色や幅を変更するといろんなバリエーションができます。

ストライプ柄

DEMO

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<div class="copy-stripe">
	この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

CSS

「90deg」→「45deg」など他の数値にすると斜めにできます。

.copy-stripe {
	background: repeating-linear-gradient(90deg, rgba(68, 68, 68, .1), rgba(68, 68, 68, .1) 4px, #fff 4px, #fff 8px);
	padding: 20px;
}

ボーダー柄

DEMO

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<div class="copy-border">
	この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

CSS

「0deg」→「45deg」など他の数値にすると斜めにできます。

.copy-border {
	background: repeating-linear-gradient(0deg, rgba(68, 68, 68, .1), rgba(68, 68, 68, .1) 4px, #fff 4px, #fff 8px);
	padding: 20px;
}