CSS web技術

画像を使わずCSSのみでborderストライプ(角丸斜め)を実現する。

ボーダーをストライプにして、更に角丸を施した枠が必要になったので作りました。以下のような感じになりました。



こちらはHTML

でこちらはCSS

 

-webkit-background-size: 15px 15px;を変えると、ボーダーの目の細かさを変更することが出来ます。

padding: 1px;の値を変えると、線の太さを変えることが出来ます。まあ、線じゃなくて、面なんですけどね…。

 

-CSS, web技術