Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】赤と青の区切り線【小ネタ】

 どうも!LSSです!!

 

CSS小ネタとして、区切り線を作ってみました。

 

 

赤と青の区切り線

 

 

 

コード

<style>
.yokosen{
height:30px;
background:
linear-gradient(30deg,#eeaaaa00 38%,#eeaaaaff 42%,#eeaaaa00 46%,#eeaaaaff 50%,#eeaaaa00 54%,#eeaaaaff 58%,#eeaaaa00 62%) 0 0/30px 30px
,linear-gradient(-30deg,#aaaaee00 38%,#aaaaeeff 42%,#aaaaee00 46%,#aaaaeeff 50%,#aaaaee00 54%,#aaaaeeff 58%,#aaaaee00 62%) 0 0/30px 30px
;}
</style>
<div class="yokosen"> </div>

 

↑のコードをコピペする事で使用できます。

 

また、同じページ内で複数、この区切り線を配置する場合は、一番下の行
<div class="yokosen"> </div>
だけを配置したい位置に貼り付ける事で使用できます(<style>~</style>は一つだけ置いておけばOK^^)

 

 

区切り線代わりに使用できますね

ちょっと話題を変えたい時などに、区切り線を入れておくと分かりやすくなりそうです^^

単純に<hr/>タグを入れておく事で、


↑こういう区切り線が入りますが、

もうちょっと凝った感じにしたい時などにいいかも?

 

※ちなみに<hr/>を使うのは↓こんなコードになります。

<p>単純に<strong>&lt;hr/&gt;</strong>タグを入れておく事で、</p>
<hr />
<p>↑こういう区切り線が入りますが、</p>

 

 

赤と青の線ですが、本当は…

線が途中で赤→青に変わっていますが、本当は「赤三本線と青三本線が交差してる感じ」のものを作ってみたかった…のが、繰り返しを考慮するとだいぶ難しそう^^;;;

 

gradient系の無制限繰り返しは、自分はだいぶ慣れてきた感じもあるのですが、radial-gradientやconic-gradientに比べ、linear-gradientはかなり手ごわい印象がありますw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^