Little Strange Software

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

【CSS】虹色の枠線、もう2種類!

 どうも!LSSです!!

 

little-strange.hatenablog.com

little-strange.hatenablog.com

と続けざまに虹色をテーマにしたCSSを書いていましたが、「虹色の枠線」を2種類、追加でさらに考えてみました^^

 

 

虹色の枠線 追加1

虹色の枠線 追加1

 

コード

<div style="border: 5px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,orange 20px 29px,yellow 40px 49px,green 60px 69px,lightblue 80px 89px,blue 100px 109px,purple 120px 129px,red 140px) 5;">虹色の枠線 追加1</div>

 

虹色の枠線 追加2

虹色の枠線 追加2

 

コード

<div style="border: 5px solid; border-image: repeating-linear-gradient(135deg,red 0px 9px,transparent 10px 19px,orange 20px 29px,transparent 30px 39px,yellow 40px 49px,transparent 50px 59px,green 60px 69px,transparent 70px 79px,lightblue 80px 89px,transparent 90px 99px,blue 100px 109px,transparent 110px 119px,purple 120px 129px,transparent 130px 139px) 5;">虹色の枠線 追加2</div>

 

 

なお、今回のこれは…

【CSS】虹色区切り線 4種 - Little Strange Software

で使ったグラデーションを、borde-imageに応用しただけのものだったりします。

 

線が斜めになっているあたりは、

little-strange.hatenablog.com

っぽいところもありますね、

 

 

 

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

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