[CSS]枠線をストライプ模様で実装する方法

今回は、「CSSで枠線をストライプ模様で実装する方法」について紹介します。

枠線のデザインの幅が広がると思うので、是非参考にしてみてください。

[CSS]枠線をストライプ模様で実装する方法

完成形はこちらです。

See the Pen
by ゆーじろー (@yujiron)
on CodePen.

枠線がストライプ模様になっていることがわかるでしょう。

それではコードの詳細を見ていきましょう!

HTML

親要素boxの中に子要素であるbox_innerを用意しました。

CSS

枠線のストライプ模様の仕組みとしては、まずは親要素boxの背景がストライプ模様になるようにします。

そして、子要素であるbox_innerの背景を白くします。

そうすることで、親要素の背景色であるストライプ模様の上に子要素であるbox_innerの白色の背景色が被さる形になります。

あとは、親要素と子要素でそれぞれpaddingを設定してあげると、上記の完成形のように枠線がストライプ模様になりますよ!

まとめ

以上が、CSSで枠線をストライプ模様で実装する方法」でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事