Css

CSSゼブラストライプの背景



Css Zebra Stripes Background



目次

水平ダブルストリップ



幅が等しくないストライプ

レベル3



縦縞

水平ダブルストリップ

body{ background: linear-gradient(#fb3 50%, #58a 50%) }

幅が等しくないストライプ

body { background: linear-gradient(#fb3 30%, #58a 30%) background-size: 100% 30px } /*or*/ body { background: linear-gradient(#fb3 30%, #58a 0) background-size: 100% 30px }



レベル3

body { background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0) background-size:100% 45px }

1-2

縦縞

body { background: linear-gradient(to right, #fb3 50%, #58a 50%) background-size:30px 100% } /*Or*/ body { background: linear-gradient(90deg, #fb3 50%, #58a 50%) background-size:30px 100% }

斜めのストライプ

body { background: linear-gradient(45deg, #fb3 25%, #58a 0,#58a 50%, #fb3 0,#fb3 75%,#58a 0) background-size:30px 30px } /*Slanted 45°symmetrical, a total of 6 color codes*/ body{ background: repeating-linear-gradient(45deg,#fb3 0, #fb3 25%, #58a 0, #58a 50%) background-size: 42.426406871px 42.426406871px }

codepen オンラインでコードを書く

CSSの謎を解き明かすPage58