CSS3で千鳥格子を作ってみました。ChromeとFireFoxで確認しました。手元にあるIE9では表示されませんでした。
結構頑張ったつもりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>千鳥格子</title> <style> div#canvas { width: 600px; height: 600px; background-color: #ffffff; -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-position: 0 0, 15px 15px, 0 0, 15px 15px, 0 0; background-image: -webkit-linear-gradient(45deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(-135deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(135deg, #000000 12.5%, #000000 12.5%, transparent 12.5%, transparent 25%, #000000 25%, #000000 37.5%, transparent 37.5%, transparent 62.5%, #000000 62.5%, #000000 75%, transparent 75%, transparent 87.5%, #000000 87.5%, #000000 100%); background-image: -moz-linear-gradient(45deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -moz-linear-gradient(-135deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -moz-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -moz-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -moz-linear-gradient(135deg, #000000 12.5%, #000000 12.5%, transparent 12.5%, transparent 25%, #000000 25%, #000000 37.5%, transparent 37.5%, transparent 62.5%, #000000 62.5%, #000000 75%, transparent 75%, transparent 87.5%, #000000 87.5%, #000000 100%); background-image: -ms-linear-gradient(45deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -ms-linear-gradient(-135deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -ms-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -ms-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -ms-linear-gradient(135deg, #000000 12.5%, #000000 12.5%, transparent 12.5%, transparent 25%, #000000 25%, #000000 37.5%, transparent 37.5%, transparent 62.5%, #000000 62.5%, #000000 75%, transparent 75%, transparent 87.5%, #000000 87.5%, #000000 100%); background-image: -o-linear-gradient(45deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -o-linear-gradient(-135deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), -o-linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -o-linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), -o-linear-gradient(135deg, #000000 12.5%, #000000 12.5%, transparent 12.5%, transparent 25%, #000000 25%, #000000 37.5%, transparent 37.5%, transparent 62.5%, #000000 62.5%, #000000 75%, transparent 75%, transparent 87.5%, #000000 87.5%, #000000 100%); background-image: linear-gradient(45deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, #000000 25%, #000000 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), linear-gradient(45deg, #ffffff 25%, #ffffff 25%, transparent 25%, transparent 100%), linear-gradient(135deg, #000000 12.5%, #000000 12.5%, transparent 12.5%, transparent 25%, #000000 25%, #000000 37.5%, transparent 37.5%, transparent 62.5%, #000000 62.5%, #000000 75%, transparent 75%, transparent 87.5%, #000000 87.5%, #000000 100%); } </style> </head> <body> <div id="canvas"> </div> </body> </html>
