hrの使いやすそうなスタイリングいろいろ

Result

いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています

css

.hr_b {/*シャドウ付き*/
	height: 8px;
	border: 0;
	box-shadow: 0 8px 8px -8px #666 inset;
}
.hr_c {/*フルワイド*/
	position: relative;
	width: 100vw;
	margin: 10px 0 10px -50vw;
	left: 50%;
}
.hr_d {/*両端フェードアウト*/
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0);
	background-image: linear-gradient(left, #f0f0f0, #666, #f0f0f0);
}
.hr_e {/*縦ストライプ*/
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		90deg,
		currentColor 33.33%,
		transparent 33.33%,
		transparent 100%
	);
	background-size: 3px 100%;
}
.hr_f {/*横ストライプ*/
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		currentColor 33.33%,
		transparent 33.33%,
		transparent 100%
	);
	background-size: 100% 3px;
}
.hr_g {/*斜めストライプ*/
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		-45deg,
		transparent,
		transparent 25%,
		currentColor 25%,
		currentColor 50%,
		transparent 50%,
		transparent 75%,
		currentColor 75%
	);
	background-size: 8px 8px;
}
.hr_h {/*テキスト入り*/
	height: 1px;
}
.hr_h::after {
	content: "text";
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1rem;
	background-color: #fff;
}
.hr_i {/*グラデーション*/
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, red, orange, yellow, blue, green);
}
.hr_j {/*長方形*/
	height: 8px;
	border: 1px solid #666;
}
.hr_k {/*ギザギザ*/
	border: none;
	height: 10px;
	background: linear-gradient(-135deg, #666 5px, transparent 0) 0 5px,
		linear-gradient(135deg, #666 5px, #fff 0) 0 5px;
	background-color: #666;
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 10px 10px;
}

凝ったスタイルでもコードが冗長すぎると、もう画像でいいんじゃないのとも思うので割とシンプルなもののみとなっています

html

↓デフォルト
<hr class="hr_a">
↓シャドウ付き
<hr class="hr_b">
↓フルワイド
<hr class="hr_c">
↓両端フェードアウト
<hr class="hr_d">
↓縦ストライプ
<hr class="hr_e">
↓横ストライプ
<hr class="hr_f">
↓斜めストライプ
<hr class="hr_g">
↓テキスト入り
<hr class="hr_h">
↓グラデーション
<hr class="hr_i">
↓長方形
<hr class="hr_j">
↓ギザギザ
<hr class="hr_k">

全てhrタグ一つで出来るものだけにしてあります

via

Fullwidth hr’s
HR Department