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

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

スポンサードリンク

こちらはHTML

でこちらはCSS

 

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

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください