まよつきー真夜中の月ー

明るい色のストライプ柄ボックス

ストライプ柄の線の太さや色・角度などは、サイトのテーマや雰囲気・ご自身の好みに合わせて変えて頂いて構いません。自由な発想でお使いください。

ただし、サンプルに全く手を加えずにコピペしたコードを公開したり配布する行為はご遠慮ください。

細いストライプ x グリーン

明るい緑色の線と白い線の繰り返しによる、細いストライプ柄のボックスデザインです。

線の幅（太さ）は緑色が5px、白が5px。すべて同じ幅になっています。一部の柄には少し濃い緑色の線を加え、３色構成となっています。

（便宜上、緑色の方をベースカラーと呼びますので、ご承知置きください）

縦ストライプ

CSSで作るストライプ柄は、線が繰り返す角度や方向を自分で指定できます。このストライプの角度は90度、「緑→白」の順で左から右へ向かうデザインです。

コードを表示する

HTML

 
 <div class="striped-box10">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box10{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 0deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px);
 	 background-image: repeating-linear-gradient(
 	 	 90deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px);  /*2色目：カラーコード 開始位置 終了位置*/
 }
 .striped-box1 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

横ストライプ＋少し濃い緑

こちらでは1色増やして3色構成のストライプにしてみました。ストライプの角度は180度。上から下に向かって「緑→白→濃い緑」の順で繰り返します。

コードを表示する

HTML

 
 <div class="striped-box11">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box11{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 90deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px,
 	 	 #c4efc3 10px 15px);
 	 background-image: repeating-linear-gradient(
 	 	 180deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px, /*2色目：カラーコード 開始位置 終了位置*/
 	 	 #c4efc3 10px 15px); /*3色目：カラーコード 開始位置 終了位置*/
 }
 .striped-box11 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

右斜めストライプ

線が斜めになったストライプにも繰り返す方向というものがあり、このストライプの場合は、左から右です。角度は135度です。

コードを表示する

HTML

 
 <div class="striped-box12">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box12{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px);
 	 background-image: repeating-linear-gradient(
 	 	 135deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px);  /*2色目：カラーコード 開始位置 終了位置*/
 }
 .striped-box12 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

左斜めストライプ＋少し濃い緑

こちらでは斜めの方向を変えて、左向きにしてみました。色は3色構成で、線の角度は45度です。繰り返しの方向は、左から右です。

コードを表示する

HTML

 
 <div class="striped-box13">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box13{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 -45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px,
 	 	 #c4efc3 10px 15px);
 	 background-image: repeating-linear-gradient(
 	 	 45deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px, /*2色目：カラーコード 開始位置 終了位置*/
 	 	 #c4efc3 10px 15px); /*3色目：カラーコード 開始位置 終了位置*/
 }
 .striped-box13 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

右斜めストライプ＋内側に枠線

ベースカラーよりも濃い緑色の線で、ボックスの内側に枠をつけました。

コードを表示する

HTML

 
 <div class="striped-box14">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box14{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px);
 	 background-image: repeating-linear-gradient(
 	 	 135deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 outline: solid 2px #7ac979; /*囲み線：形状 太さ 色*/
 	 outline-offset: -8px; /*囲み線の位置*/
 }
 .striped-box14 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

右斜めストライプ＋外側に枠線

こちらにはベースカラーと同じ色の線で、ボックスの外側に枠をつけました。

コードを表示する

HTML

 
 <div class="striped-box15">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box15{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px);
 	 background-image: repeating-linear-gradient(
 	 	 135deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 outline: solid 2px #d8fedc; /*囲み線：形状 太さ 色*/
 	 outline-offset: 5px; /*囲み線の位置*/
 }
 .striped-box15 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

左斜めストライプ＋同系色の影

ボックスの右と下側に、ベースカラーよりも濃い色で、影をつけてみました。

同系色による配色は、まとまった雰囲気になります。サイトの印象は変えず、少しだけアクセントをつけたい時などにいかがでしょうか。

コードを表示する

HTML

 
 <div class="striped-box16">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box16{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 -45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px,
 	 	 #c4efc3 10px 15px);
 	 background-image: repeating-linear-gradient(
 	 	 45deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px, /*2色目：カラーコード 開始位置 終了位置*/
 	 box-shadow: 8px 8px #7ac979; /*影の部分：X軸、Y軸、色*/
 }
 .striped-box16 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

左斜めストライプ＋近似色の影

影の色を、緑系から水色系の色に変えてみました。緑とは別の色ですが、近似色なので、悪目立ちする事は少ないと思います。

画面にアクセントが欲しい時や、少し目立たせたい場合にいかがでしょうか。

コードを表示する

HTML

 
 <div class="striped-box17">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box17{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 -45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px,
 	 	 #c4efc3 10px 15px);
 	 background-image: repeating-linear-gradient(
 	 	 45deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px, /*2色目：カラーコード 開始位置 終了位置*/
 	 box-shadow: 8px 8px #86cfdf; /*影の部分：X軸、Y軸、色*/
 }
 .striped-box17 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

斜めストライプ＋ずらした枠線

鮮やかな青緑色の線でボックスを囲む枠を作り、位置をボックスの斜め左上にずらしました。枠線を二重線から一重線に変えたい時は、枠線部分の形状を「double」から「solid」に変えてください。

コードを表示する

HTML

 
 <div class="striped-box18">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box18{
 	 position: relative;
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.25em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 45deg,
 	 	 #d8fedc 0 5px,
 	 	 #fffffe 5px 10px);
 	 background-image: repeating-linear-gradient(
 	 	 135deg, /*ストライプの角度*/
 	 	 #d8fedc 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 #fffffe 5px 10px);  /*2色目：カラーコード 開始位置 終了位置*/
 }
 .striped-box18 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2b332c; /*文字の色*/
 }

 /**枠線に関する設定**/
 .striped-box18:before{ 
 	 position: absolute;
 	 content: '';
 	 width: 100%;
 	 height: 100%;
 	 top: -7px;
 	 left: -7px;
 	 outline: double 5px #2cb67d; /*枠線部分：形状 太さ 色*/
 	 outline-offset: -1px; /*枠線の位置*/
 }

やや太いストライプ x ピンク x 角丸

線の色は、明るいピンクと白の２色。やや太めの線を中心としたストライプ柄です。

ピンクの線と白い線を1本ずつ足した時の合計が20pxになるように、線の幅を調整して組み合わせました。横ストライプだけ例外で、合計が25pxになっています。

ボックスの四隅を丸くして、全体に可愛らしい雰囲気になるように作りました。

縦ストライプ (ピンク10px、白10px)

緑の縦ストライプとは線が繰り返す方向が逆になっており、右から左に向かいます。
そのため、ボックスの左端に白い線が来る場合があります。

コードを表示する

HTML

 
 <div class="striped-box20">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box20{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 180deg,
 	 	 	 #fed8e3 0 10px,
 	 	 	 #fffffe 10px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 270deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 10px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 10px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 }
 .striped-box20 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

横ストライプ (ピンク15px、白10px)

こちらの柄も、線が繰り返す方向が緑の横ストライプと逆になっており、下から上に向かいます。そのため、ボックスの高さによっては白い線が一番上に来ます。

コードを表示する

HTML

 
 <div class="striped-box21">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box21{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 90deg,
 	 	 	 #fed8e3 0 15px,
 	 	 	 #fffffe 15px 25px);
 	 background-image: repeating-linear-gradient(
 	 	 	 180deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 15px 25px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 }
 .striped-box21 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

右斜めストライプ (ピンク15px、白5px)

ストライプの角度は135度。白い線を細くしてみました。

コードを表示する

HTML

 
 <div class="striped-box22">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box22{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #fed8e3 0 15px,
 	 	 	 #fffffe 15px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 15px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 }
 .striped-box22 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

左斜めストライプ (ピンク5px、白15px)

ストライプの角度は45度。今度はピンクの線を細くしてみました。

コードを表示する

HTML

 
 <div class="striped-box23">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box23{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #fed8e3 0 5px,
 	 	 	 #fffffe 5px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 }
 .striped-box23 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

右斜めストライプ＋内側に枠線

少し濃いピンク色で、ボックスの内側に細い枠線を加えました。

コードを表示する

HTML

 
 <div class="striped-box24">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box24{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #fed8e3 0 15px,
 	 	 	 #fffffe 15px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 15px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 	 outline: double 5px #f3a8c2; /*枠線部分：形状 太さ 色*/
 	 outline-offset: -10px; /*枠線の位置*/
 }
 .striped-box24 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

右斜めストライプ＋外側に枠線

柄の色と同じピンク色で、ボックスの外側に細い枠線をつけました。

コードを表示する

HTML

 
 <div class="striped-box25">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box25{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #fed8e3 0 15px,
 	 	 	 #fffffe 15px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 15px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 	 outline: double 5px #fed8e3; /*枠線部分：形状 太さ 色*/
 	 outline-offset: 3px; /*枠線の位置*/
 }
 .striped-box25 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

左斜めストライプ＋同系色の影

やや濃い目のピンク色で、ボックスの右と下に影をつけました。より可愛らしい印象になりました。

コードを表示する

HTML

 
 <div class="striped-box26">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box26{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em; 	 
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #fed8e3 0 5px,
 	 	 	 #fffffe 5px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 	 box-shadow: 8px 8px #df86ac; /*影の部分：X軸 Y軸 色*/
 }
 .striped-box26 p{
 	 margin: 0;
 	 padding: 0; 	 
 	 color: #332b2d; /*文字の色*/
 }

左斜めストライプ＋近似色の影

影の色を、ピンク系から青紫系の色に変えてみました。同系色の影より、少し落ち着いた雰囲気になりました。

コードを表示する

HTML

 
 <div class="striped-box27">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box27{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em; 	 
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #fed8e3 0 5px,
 	 	 	 #fffffe 5px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 	 box-shadow: 8px 8px #b092e2; /*影の部分：X軸 Y軸 色*/
 }
 .striped-box27 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

斜めストライプ＋ずらした枠線

鮮やかなピンク色の枠線を加え、位置を斜め左上にずらしました。線の幅はピンク、白ともに10pxです。

コードを表示する

HTML

 
 <div class="striped-box28">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box28{
 	 position: relative;
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.25em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #fed8e3 0 10px,
 	 	 	 #fffffe 10px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 10px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 10px 20px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10px; /*ボックスの角を丸くする*/
 }
 .striped-box28 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #332b2d; /*文字の色*/
 }

 /**枠線に関する設定**/
 .striped-box28:before{ 
 	 position: absolute;
 	 content: '';
 	 width: 100%;
 	 height: 100%;
 	 top: -7px;
 	 left: -7px;
 	 border-radius: 10px;
 	 outline: solid 3px #f05aad;
 	 outline-offset: -1px; 	 
 }

太いストライプ x ラベンダー x カーブ

縦ストライプ（ラベンダー15px、白15px）

細い縦ストライプと同じく、左から右に向かって、ベースカラーの線と白い線を繰り返すデザインです。

コードを表示する

HTML

 
 <div class="striped-box30">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box30{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 0deg,
 	 	 	 #ebd8fe 0 15px,
 	 	 	 #fffffe 15px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 90deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 15px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 }
 .striped-box30 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

横ストライプ＋少し濃いラベンダー

線の幅はラベンダー15px、少し濃いラベンダー5px、白15pxです。線が上から下に向かって繰り返すデザインです。

コードを表示する

HTML

 
 <div class="striped-box31">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box31{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 90deg,
 	 	 	 #ebd8fe 0 15px,
 	 	 	 #ddc4fb 15px 20px,
 	 	 	 #fffffe 20px 35px);
 	 background-image: repeating-linear-gradient(
 	 	 	 180deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 15px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #ddc4fb 15px 20px, /*2色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 20px 35px); /*3色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 }
 .striped-box31 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

右斜めストライプ (ラベンダー25px、白5px)

ストライプの角度は135度です。ラベンダー色の線を太く、白い線を細くしました。

コードを表示する

HTML

 
 <div class="striped-box32">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box32{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 25px,
 	 	 	 #fffffe 25px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 25px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 25px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 }
 .striped-box32 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

左斜めストライプ (ラベンダー25px、白5px)

こちらのストライプの角度は45度です。白い線を太く、ラベンダー色の線を細くしました。

コードを表示する

HTML

 
 <div class="striped-box33">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box33{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #ebd8fe 0 5px,
 	 	 	 #fffffe 5px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 }
 .striped-box33 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

右斜めストライプ＋内側に太い枠線

ベースカラーよりも少し濃いラベンダー色で、ボックスの内側に枠線をつけました。

コードを表示する

HTML

 
 <div class="striped-box34">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box34{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 25px,
 	 	 	 #fffffe 25px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 25px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 25px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 	 outline: solid 3px #cba8f3; /*枠線：形状 太さ 色*/
 	 outline-offset: -8px; /*枠線の位置*/
 }
 .striped-box34 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

右斜めストライプ＋外側に太い枠線

ベースカラーと同じラベンダー色の太い線で、ボックスの外側を囲みました。

コードを表示する

HTML

 
 <div class="striped-box35">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box35{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 25px,
 	 	 	 #fffffe 25px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 25px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 25px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 	 outline: solid 3px #ebd8fe; /*囲み線の形状、太さ、色*/
 	 outline-offset: 5px; /*囲み線の位置*/
 }
 .striped-box35 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

左斜めストライプ＋影（同系色）

やや濃いめのラベンダー色の影を、ボックスの右と下につけました。少し華やかな印象に変わったように思います。

コードを表示する

HTML

 
 <div class="striped-box36">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box36{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #ebd8fe 0 5px,
 	 	 	 #fffffe 5px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 	 box-shadow: 8px 8px #a786df; /*影の部分：X軸 Y軸 色*/
 }
 .striped-box36 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

斜めストライプ＋影（近似色）

影の色を、紫系から、ややくすんだ青色に変えてみました。同系色の影よりも、やや落ち着いた印象だと思います。

コードを表示する

HTML

 
 <div class="striped-box37">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box37{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.4em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 -45deg,
 	 	 	 #ebd8fe 0 5px,
 	 	 	 #fffffe 5px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 45deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 5px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 5px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 	 box-shadow: 8px 8px #869adf; /*影の部分：X軸 Y軸 色*/
 }
 .striped-box37 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }

斜めストライプ＋ずらした枠線

線の幅はラベンダーが20px、白が10px。

ボックスに鮮やかな紫色の枠線を加え、位置を斜め左上にずらしました。

コードを表示する

HTML

 
 <div class="striped-box38">
 	 <p>ここに文章が入ります。</p>
 </div>

CSS

 
 .striped-box38{
 	 width: 90%;
 	 margin: 2em auto;
 	 padding: 1.25em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 20px,
 	 	 	 #fffffe 20px 30px);
 	 background-image: repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 20px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 20px 30px);  /*2色目：カラーコード 開始位置 終了位置*/
 	 border-radius: 10%; /*ボックスの角をカーブさせる*/
 }
 .striped-box38 p{
 	 margin: 0;
 	 padding: 0;
 	 color: #2f2b33; /*文字の色*/
 }
 /**囲み線に関する設定**/
 .striped-box38:before{ 
 	 position: absolute;
 	 content: '';
 	 width: 100%;
 	 height: 100%;
 	 top: -7px;
 	 left: -7px;
 	 border-radius: 10%;
 	 outline: solid 3px #7f5af0;
 	 outline-offset: -1px;
 }

タイトル行つきのボックス

ボックスの上下に斜めのストライプ柄を入れました。本文の背景色には、視認性の良い白を組み合わせました。

コードを表示する

HTML

 
 <div class="striped-box40" box-title="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box40:before {
 	 content: attr(box-title);
 	 display: block;
 	 margin-bottom: 0.6em;
 	 padding: 0.5em 1em;
 	 text-align: center;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #2b332c; /*文字の色*/
 }

 .striped-box40 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 1.5em 2.5em;
 	 background-image:
 	 	 -webkit-linear-gradient(
 	 	 	 90deg,
 	 	 	 transparent 2.5em,
 	 	 	 #fffffe 2.5em calc(100% - 1.5em),
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 17px,
 	 	 	 #fffffe 17px 20px);
 	 background-image:
 	 	 linear-gradient(
 	 	 	 180deg,
 	 	 	 transparent 2.5em,
 	 	 	 #fffffe 2.5em calc(100% - 1.5em),/*本文の背景色にあたる色と開始位置、終了位置*/
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 17px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 17px 20px); /*2色目：カラーコード 開始位置 終了位置*/
 }

 .striped-box40 p {
 	margin: 0;
 	padding: 0;
 	color: #2b332c;
 }

上下のストライプはそのままに、本文の背景色を視認性を損なわない程度の、ごく薄い緑色に変更しました。

コードを表示する

HTML

 
 <div class="striped-box41" box-title="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box41:before {
 	 content: attr(box-title);
 	 display: block;
 	 margin-bottom: 0.6em;
 	 padding: 0.5em 1em;
 	 text-align: center;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #2b332c; /*文字の色*/
 }

 .striped-box41 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 1.5em 2.5em;
 	 background-image:
 	 	 -webkit-linear-gradient(
 	 	 	 90deg,
 	 	 	 transparent 2.5em,
 	 	 	 #f7fff8 2.5em calc(100% - 1.5em),
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 -webkit-repeating-linear-gradient(
 	 	 	 45deg,
 	 	 	 #ebd8fe 0 17px,
 	 	 	 #fffffe 17px 20px);
 	 background-image:
 	 	 linear-gradient(
 	 	 	 180deg,
 	 	 	 transparent 2.5em,
 	 	 	 #f7fff8 2.5em calc(100% - 1.5em),/*本文の背景色にあたる色と開始位置、終了位置*/
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 repeating-linear-gradient(
 	 	 	 135deg, /*ストライプの角度*/
 	 	 	 #ebd8fe 0 17px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 17px 20px); /*2色目：カラーコード 開始位置 終了位置*/
 }

 .striped-box41 p {
 	margin: 0;
 	padding: 0;
 	color: #2b332c;
 }

横ストライプの上から、両脇を透過させたピンク色を重ね、ボックスの両脇にだけストライプが入っているようなデザインにしました。

コードを表示する

HTML

 
 <div class="striped-box42" box-title="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box42:before {
 	 content: attr(box-title);
 	 display: block;
 	 padding: 0.7em 1em;
 	 text-align: center;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #292627; /*文字の色*/
 }

 .striped-box42 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 3em 1.5em;
 	 background-image:
 	 	 -webkit-linear-gradient(
 	 	 	 0deg,
 	 	 	 transparent 1.5em,
 	 	 	 #ffeff4 1.5em calc(100% - 1.5em),
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 -webkit-repeating-linear-gradient(
 	 	 	 90deg,
 	 	 	 #fed8e3 0 17px,
 	 	 	 #fffffe 17px 20px);
 	 background-image:
 	 	 linear-gradient(
 	 	 	 90deg,
 	 	 	 transparent 1.5em,
 	 	 	 #ffeff4 1.5em calc(100% - 1.5em),/*本文の背景色にあたる色と開始位置、終了位置*/
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 repeating-linear-gradient(
 	 	 	 180deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 17px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 17px 20px); /*2色目：カラーコード 開始位置 終了位置*/
 }

 .striped-box42 p {
 	margin: 0;
 	padding: 0;
 	color: #333031;
 }

ストライプの上に重ねる無地の背景色を、ピンクから少し透過させた白に変えてみました。透過度は40％(＝不透明度60％) です。

コードを表示する

HTML

 
 <div class="striped-box43" box-title="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box43:before {
 	 content: attr(box-title);
 	 display: block;
 	 padding: 0.7em 1em;
 	 text-align: center;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #292627; /*文字の色*/
 }

 .striped-box43 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 3em 1.5em;
 	 background-image:
 	 	 -webkit-linear-gradient(
 	 	 	 0deg,
 	 	 	 transparent 1.5em,
 	 	 	 rgba(255,255,254, 0.6) 1.5em calc(100% - 1.5em),
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 -webkit-repeating-linear-gradient(
 	 	 	 90deg,
 	 	 	 #fed8e3 0 17px,
 	 	 	 #fffffe 17px 20px);
 	 background-image:
 	 	 linear-gradient(
 	 	 	 90deg,
 	 	 	 transparent 1.5em,
 	 	 	 rgba(255,255,254, 0.6) 1.5em calc(100% - 1.5em),/*本文の背景色にあたる色と開始位置、終了位置*/
 	 	 	 transparent calc(100% - 1.5em)),
 	 	 repeating-linear-gradient(
 	 	 	 180deg, /*ストライプの角度*/
 	 	 	 #fed8e3 0 17px, /*1色目：カラーコード 開始位置 終了位置*/
 	 	 	 #fffffe 17px 20px); /*2色目：カラーコード 開始位置 終了位置*/
 }

 .striped-box43 p {
 	margin: 0;
 	padding: 0;
 	color: #333031;
 }

タイトル部分にのみストライプ柄を入れ、ボックスとタイトル行の周りを太めの線で囲んでみました。

コードを表示する

HTML

 
 <div class="striped-box44" box-label="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box44:before {
 	 content: attr(box-label);
 	 display: inline-block;
 	 margin-bottom: 1em;
 	 padding: 0.4em 1em;
 	 background-image: -webkit-repeating-linear-gradient(
 	 	 45deg,
 	 	 #ebd8fe 0 17px,
 	 	 #fffffe 17px 20px);
 	 background-image: repeating-linear-gradient(
 	 	 135deg,
 	 	 #ebd8fe 0 17px,
 	 	 #fffffe 17px 20px);
 	 border-radius: 0 0 15% 15%;
 	 outline: solid 2px #a786df;
 	 outline-offset: 2px;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #2f2b33; /*文字の色*/ 	 
 }

 .striped-box44 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 1.5em 1em;
 	 background: #fffffe;
 	 outline: solid 3px #a786df;
 	 outline-offset: 0px;
 	 text-align: center;
 }

 .striped-box44 p {
 	margin: 0;
 	padding: 0;
 	text-align: left;
 	color: #2f2b33;
 }

こちらは逆にタイトルの背景を白、本文の背景をストライプにして、柄と色を入れ替えてみました。

コードを表示する

HTML

 
 <div class="striped-box45" box-label="ここにタイトルを入れます">
	 <p>こちらに本文を入れます。</p>
 </div>

CSS

 
 /**タイトル部分の設定**/
 .striped-box45:before {
 	 content: attr(box-label);
 	 display: inline-block;
 	 margin-bottom: 1em;
 	 padding: 0.4em 1em;
 	 background: #fffffe;
 	 border-radius: 0 0 15% 15%;
 	 outline: solid 2px #a786df;
 	 outline-offset: 0;
 	 font-size: 18px; /*文字の大きさ*/
 	 font-size: 1.8rem;
 	 letter-spacing: 0.05em;
 	 font-weight: bold;
 	 color: #2f2b33; /*文字の色*/ 	 
 }

 .striped-box45 {
	 width: 90%;
 	 margin: 2em auto;
 	 padding: 0 1.5em 1em;
 	 background-image: -webkit-repeating-linear-gradient(
            45deg,
            #ebd8fe 0 17px,
            #fffffe 17px 20px);
        background-image: repeating-linear-gradient(
            135deg,
            #ebd8fe 0 17px,
            #fffffe 17px 20px);
 	 text-align: center;
 }

 .striped-box45 p {
 	margin: 0;
 	padding: 0;
 	text-align: left;
 	color: #2f2b33;
 }