CSSストライプ背景

CSSで背景をシマシマにする

基本のボックス

----Contents----


<div class="stripe">
	----Contents----
</div>


div[class|="stripe"] {
	min-height: 200px;
	margin: 2rem auto;
	padding: 1rem 2rem;
	}
div[class|="stripe"] h2 {
  margin: 1rem;
	}
div.stripe {
	background: #eee;
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ
ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ
ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-tate {
  background: linear-gradient(180deg, #e0f8d8 0%, #e0f8d8 40%, #d1eefc 40%, #d1eefc 100%);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-yoko {
  background: linear-gradient(90deg, #e0f8d8 0%, #e0f8d8 50%, #d1eefc 50%, #d1eefc 100%);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-naname {
  background: linear-gradient(45deg, #e0f8d8 0%, #e0f8d8 50%, #d1eefc 50%, #d1eefc 100%);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-naname2 {
  background: linear-gradient(135deg, #e0f8d8 0%, #e0f8d8 50%, #d1eefc 50%, #d1eefc 100%);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-naname3 {
  background: linear-gradient(-45deg, #e0f8d8 0%, #e0f8d8 50%, #d1eefc 50%, #d1eefc 100%);
	}

記事のタイトル H2


.stripe-tatejima {/*ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点, （ 色3 始点, 色3 終点, … ） */
  background: repeating-linear-gradient(to right, #e0f8d8, #e0f8d8 50px, #d1eefc 50px, #d1eefc 100px);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-yokojima {
  background: repeating-linear-gradient(to top, #e0f8d8, #e0f8d8 10px, #d1eefc 10px, #d1eefc 50px);
	}

記事のタイトル H2

ABCDEあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆいぇよらりるれろ


.stripe-nanamejima {
  background: repeating-linear-gradient(135deg, #e0f8d8, #e0f8d8 10px, #d1eefc 10px, #d1eefc 20px);
	}