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

CSS

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

 

 

色を変える

 

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

関連記事

CSS

Posted by 綾糸