Cross
Creating a cross shape using div cells and css3
by kapilgopinath
HTML
<div class="container">
<div class="container1 floatLt borderRt">
<div class="crossContainer">
</div>
</div>
<div class="container2 floatLt"></div>
</div>
CSS
html, body, .container{
width:100%;
height:100%;
margin: 0;
}
.floatLt{
float:left;
}
.displayHdn{
display: none;
}
.container1{
width: 60%;
height:100%;
}
.container2{
width: 30%;
height:100%;
}
.borderRt{
border-right: 1px solid #000;
}
.crossContainer{
width:50%;
height:50%;
margin: 10% auto;
}
/** style for cross **/
.square {
position: relative;
width: 14.06%;
height: 14%;
border: 1px solid;
background: white;
overflow: hidden;
border-right: 0;
border-bottom: 0;
}
.blankCross{
width: 14.06%;
height: 14%;
border: 1px solid #fff;
border-right: 0;
border-bottom: 0;
float:left;
}
div.square:nth-child(7n){
border-right: 1px solid;
}
div.square:nth-child(45),div.square:nth-child(46),div.square:nth-child(47){
border-bottom: 1px solid;
}
div.blankCross:nth-child(7n){
border-right: 1px solid #fff;
}
div.blankCross:nth-child(6),div.blankCross:nth-child(13),div.blankCross:nth-child(41),div.blankCross:nth-child(48){
border-left: 1px solid;
}
div.blankCross:nth-child(36),div.blankCross:nth-child(37),div.blankCross:nth-child(41),div.blankCross:nth-child(42){
border-top: 1px solid;
}
...
JavaScript
var crossCntnr = document.querySelector('.crossContainer');
var _div_ = document.createElement('div');
var showCross1, showCross2 = false, dayNum = 0;
for (var i = 0; i < 7; i++) {
if ([0, 1, 5, 6].indexOf(i) >= 0) {
showCross1 = false;
} else {
showCross1 = true;
}
for (var j = 0; j < 7; j++) {
var div1 = _div_.cloneNode();
if (!showCross1) {
if ([0, 1, 5, 6].indexOf(j) >= 0) {
showCross2 = false;
} else {
showCross2 = true;
}
} else {
showCross2 = true;
}
if (showCross2){
var div2 = _div_.cloneNode();
var div3 = _div_.cloneNode();
var div4 = _div_.cloneNode();
div1.className = 'square floatLt';
div2.className = 'inner-element-1';
div3.className = 'inner-element-2';
div4.className = 'dayNum';
div4.appendChild(document.createTextNode(++dayNum));
div1.appendChild(div2);
div1.appendChild(div3);
div1.appendChild(div4);
}else{
div1.className = 'blankCross';
}
crossCntnr.appendChild(div1);
}
}