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

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

 

HTML

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

<hr />

 

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

<hr class="line1">

 

CSS

シンプルなライン

ドット

---

 

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;
}

 

グラデーション

linear-gradient使用の例

---

 

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;
}

 

radial-gradient使用の例

 

---

 

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;
}

 

 

色を変える

 

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

赤桃青紫黄橙緑茶黒