HTMLで和柄を作ってみる その2


HTMLで無理やり和柄に挑戦第二弾

 

六角格子

六角格子

今回は六角格子に挑戦しようと思います。当然ながら画像は一切使いません。

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
 <meta charset="UTF-8">
 <title>六角格子</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 <script>
  var app = angular.module('myApp', []);
  app.controller('mainCtrl', function ($scope) {
   var data = this;
   data.rows = new Array(3);
   data.datas = new Array(10);
   for (var i = 0; i < data.datas.length; i++) {
    data.datas[i] = i;
   };
   for (var i = 0; i < data.rows.length; i++) {
    data.rows[i] = i;
   };
 });
</script>
</head>
<body ng-controller="mainCtrl as data">
 <div class="box" ng-repeat="i in data.rows" style="top:{{i *349 - 50}}px">
 <div class="wrap1">
 <div id="{{$index}}" class="hexagon base" ng-repeat="data in data.datas"></div>
 </div>
 <div class="wrap2">
 <div id="{{$index}}" class="hexagon base" ng-repeat="data in data.datas"></div>
 </div>
 </div>
</body>
</html>

今回も繰り返し処理はAngularJSを使用しました。

 data.rows = new Array(3);
 data.datas = new Array(10);

この2行で繰り返し用の配列を作ってますが、量は適当です。

body{
 padding:0;
 margin:0;
 width:100%;
 height:100%;
 overflow: hidden;
 white-space:nowrap;
 background:#a9943f;
}
 .hexagon {
 display: inline-block;
 position: relative;
 width: 197px; 
 height: 115.47px;
 background-color: #aea47a;
 margin: 57.74px 3px;
 border-left: solid 5px #1c4325;
 border-right: solid 5px #1c4325;
 border-radius: 3%;
 }

.hexagon:before,
.hexagon:after {
 content: "";
 position: absolute;
 z-index: 1;
 width: 141.42px;
 height: 141.42px;
 border-radius: 3%;
 -webkit-transform: scaleY(0.5774) rotate(-45deg);
 -ms-transform: scaleY(0.5774) rotate(-45deg);
 transform: scaleY(0.5774) rotate(-45deg);
 background-color: inherit;
 left: 24.2893px;
}

.hexagon:before {
 top: -70.7107px;
 border-top: solid 7.0711px #1c4325;
 border-right: solid 7.0711px #1c4325;
}

.hexagon:after {
 bottom: -70.7107px;
 border-bottom: solid 7.0711px #1c4325;
 border-left: solid 7.0711px #1c4325;
}

.wrap1{
 position:relative;
 height: 60px;
}
.wrap2{
 position:relative;
 height: 60px;
 top: 114px;
 left: -106px;
}
.box{
 position:absolute;
 display:inline-block;
}

まず四角の要素を作り、それにbefore・after擬似要素で三角形を追加して45度傾けて配置ということをしています。

その後、AngularJSで横並びに配置して、要素の半分ほどを交互にずらすことによって全面に配置してます。

お遊び的な感じですが、背景に利用したりなどできるかなぁと思ってます。


投稿日: 2015年7月29日
カテゴリー: 未分類 | 投稿者: