《CSS》ジグザグ背景をつくる

公開日：2024年02月27日　最終更新日：2024年2月27日

CSS

背景色の境界線をジグザグにします。
疑似要素を使って、::beforeで上部のジグザグ・::afterで下部のジグザクを作成しています。

DEMO

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

HTML

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

CSS

.copy {
	background: #f4f2f2;
	padding: 10px 20px;
	position: relative;
}
.copy::before {
	background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px,
	linear-gradient(135deg, #fff 4px, #f4f2f2 0) 0 5px;
	background-color: #fff;
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 10px 10px;
	content: '';
	display: block;
	height: 10px;
	left: 0;
	position: absolute;
	top: -10px;
	width: 100%;
}
.copy::after {
	background: linear-gradient(-135deg, #f4f2f2 5px, transparent 0) 0 5px,
	linear-gradient(135deg, #f4f2f2 4px, #fff 0) 0 5px;
	background-color: #f4f2f2;
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 10px 10px;
	bottom: -10px;
	content: '';
	display: block;
	height: 10px;
	left: 0;
	position: absolute;
	width: 100%;
}