縦ボーダーのシャツを着ても縞のゆがみなんて全く気にならないガリのゴロドクさんです、どうも。 CSSで作る吹き出しの記事がなかなか評判良かった(WEBクリエイターボックスさんにツイとFBで拡散されて見たことのない時間PVになりました。ありがとうマナさん!)ので画像不要・CSSのみの定番演出シリーズ第2弾ということで「ボーダー柄の背景」の作り方を解説します。 ツートンのバックグラウンドイメージを繰り返す ベースとなるHTMLは例によって1行のみです。どのタグでも良いんですがとりあえず中身のないdiv要素を用意してこれに適用することとします。 <div class="stripe"></div> CSSではクラスで管理しようと思いますので適当にクラスを付けておいて下さい。 基本となるCSSは以下の通り。 .stripe{ display:block; width:425px; height:22
![CSSのみ画像不要のストライプ背景の作り方を若干丁寧に解説してみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/dda2f750224bdf6511421511acdb3a40c8b3a3ee/height=288;version=1;width=512/https%3A%2F%2Fblog.56doc.net%2Fwp-content%2Fuploads%2F2017%2F05%2Fsample001-1.png)