hexagone backgound

dabblet.css

/* hexagone backgound */
.outer {
height:300px;
width:300px;
background:linear-gradient(45deg, white 13.5%, transparent 13.5%, transparent 85%,  white 85%),
linear-gradient(-45deg, white 13.5%, red 13.5%,red 85%, white 85%) /* here replace red by background-color you whish*/;
text-align:center;
display:inline-table;
transition:1s;
}
.inner {display:table-cell;vertical-align:middle;}

.hexagon + .outer {background:linear-gradient(70deg, white 13.5%, transparent 13.5%, transparent 85%,  white 85%),
linear-gradient(-70deg, white 13.5%, green 13.5%,green 85%, white 85%) /* here replace red by background-color you whish*/;
width:150px
}
.outer:hover {width:1400px; transition:2s;

dabblet.html

<div class="hexagon outer">
   <div class="hexagon inner">
hexa, gone or not ?<br/>
needs to be a square not to go ?
<br/>Hover me
   </div>
</div>
<div class="hexagon outer">
   <div class="hexagon inner">
hexa, gone or not ?<br/>Hover me
   </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}