読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

CSS3で千鳥格子を作る

css3

CSS3で千鳥格子を作ってみました。ChromeFireFoxで確認しました。手元にある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>