※CSS3のプロパティ「border-image」を使って、もっとシンプルに縞模様の枠線を作成できる方法を、記事「CSS3のborder-imageで、しましまの目立つ枠線を作る」で公開しています。そちらも、ぜひご参照下さい。(2014年3月27日公開)

縞模様の枠線を作る

スタイルシートのborderプロパティを使うと様々な枠線を作れますが、もっと目立つ凝った枠線を作ってみましょう。 今回は、以下のような枠を作る方法をご紹介いたします。

緑色と黄色の斜線からなる縞模様の枠線です。


橙色と赤色にもできます。


水色と青色にも。記述する文字列が多ければ、枠の高さも自動的に広がります。

上記の3つは、どれも枠線の太さが5pxです。この太さは、スタイルシートで自由に変更できます。

枠線の太さは自由に変えられます。細くした例。


これは太くした例。

「縞模様の枠線」の枠線をなくすと、以下のようにもできます。

枠線の枠線をなくした版。

「縞模様の枠線」の枠線の色を工夫すると、枠線そのものを立体に見せることもできます。

縞模様の枠線が浮き上がったように見える例。


縞模様の枠線が凹んでいるように見える例。

いかがでしょうか? なかなか目立つ枠になっているのではないでしょうか。
これらの枠線は、画像とスタイルシートを使って実現しています。

それでは、この枠線の作り方を順にご説明いたします。

縞模様の枠線の作り方へ >>