コピペで！HRタグのラインCSSデザイン14パターン

CSS

2020.06.192024.01.25

この記事は約4分で読めます。

HRタグ用のサンプルCSSです。

HTML

HTMLは、CSSでHRタグ自体に設定する場合は、以下のようにHRタグのみ

<hr />

クラスを指定して使い分ける場合は以下のように記述してご利用下さい。

<hr class="line1">

ドット

hr.line01 {
border: none;
border-top: dotted 1px #333;
}

二重線

hr.line02 {
border: none;
border-top: double 3px #333;
}

破線

hr.line03 {
border: none;
border-top: dashed 2px #333;
}

hr.line2 {
border: none;
background:linear-gradient(to right, white, gray, white);
height: 3px;
}

hr.line3 {
border: none;
background: linear-gradient(45deg, blue, red);
height: 3px;
}

hr.line4 {
border: none;
background: linear-gradient(to left top, blue, red);
height: 3px;
}

hr.line5 {
border: none;
background: linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
height: 3px;
}

hr.line6 {
border: none;
background: linear-gradient(.25turn, red, 10%, blue);
height: 3px;
}

hr.line7 {
border: none;
background: linear-gradient(45deg, red 0 50%, blue 50% 100%);
height: 3px;
}

hr.line1 {
border: none;
background:  radial-gradient(#eb8686, #edcccc);
height: 3px;
}

hr.line8 {
border: none;
background:  radial-gradient(ellipse farthest-side, red, yellow, skyblue);
height: 3px;
}

hr.line9 {
border: none;
background:  radial-gradient(circle farthest-side, red, yellow, skyblue);
height: 3px;
}

hr.line10 {
border: none;
background:  radial-gradient(circle, red 50px, yellow 70px, skyblue 100px);
height: 3px;
}

hr.line11 {
border: none;
background:  radial-gradient(circle at top left, red 50px, yellow 70px, skyblue 100px);
height: 3px;
}

カラーコードは以下もご利用ください。