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

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

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

完成形はこちらです。

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

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

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

HTML

<div class="box">
    <div class="box_inner">
        <p>枠線がストライプ線になります</p>
    </div>
</div>

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

CSS

.box {
    background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
    padding: 5px;
}
.box_inner {
    background-color: white;
    padding: 20px;
}

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

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

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

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

まとめ

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