<section class="black">
<div class="corner corner1 topleft"></div>
<div class="corner corner1 topright"></div>
<div class="corner corner1 bottomleft"></div>
<div class="corner corner1 bottomright"></div>
<h2>1</h2>
</section>
<section class="black">
<div class="corner corner2 topleft"></div>
<div class="corner corner2 topright"></div>
<div class="corner corner2 bottomleft"></div>
<div class="corner corner2 bottomright"></div>
<h2>2</h2>
</section>
<section class="black">
<div class="corner corner3 topleft"></div>
<div class="corner corner3 topright"></div>
<div class="corner corner3 bottomleft"></div>
<div class="corner corner3 bottomright"></div>
<h2>3</h2>
</section>
<section class="black">
<div class="corner corner4 topleft"></div>
<div class="corner corner4 topright"></div>
<div class="corner corner4 bottomleft"></div>
<div class="corner corner4 bottomright"></div>
<h2>4</h2>
</section>
<section class="black">
<div class="corner corner5 topleft"></div>
<div class="corner corner5 topright"></div>
<div class="corner corner5 bottomleft"></div>
<div class="corner corner5 bottomright"></div>
<h2>5</h2>
</section>
<section class="black">
<div class="corner corner6 topleft"></div>
<div class="corner corner6 topright"></div>
<div class="corner corner6 bottomleft"></div>
<div class="corner corner6 bottomright"></div>
<h2>6</h2>
</section>
<!-- variant -->
<section class="black">
<div class="corner corner1 variant topleft"></div>
<div class="corner corner1 variant topright"></div>
<div class="corner corner1 variant bottomleft"></div>
<div class="corner corner1 variant bottomright"></div>
<h2>1</h2>
</section>
<section class="black">
<div class="corner corner2 variant topleft"></div>
<div class="corner corner2 variant topright"></div>
<div class="corner corner2 variant bottomleft"></div>
<div class="corner corner2 variant bottomright"></div>
<h2>2</h2>
</section>
<section class="black">
<div class="corner corner3 variant topleft"></div>
<div class="corner corner3 variant topright"></div>
<div class="corner corner3 variant bottomleft"></div>
<div class="corner corner3 variant bottomright"></div>
<h2>3</h2>
</section>
<section class="black">
<div class="corner corner4 variant topleft"></div>
<div class="corner corner4 variant topright"></div>
<div class="corner corner4 variant bottomleft"></div>
<div class="corner corner4 variant bottomright"></div>
<h2>4</h2>
</section>
<section class="black">
<div class="corner corner5 variant topleft"></div>
<div class="corner corner5 variant topright"></div>
<div class="corner corner5 variant bottomleft"></div>
<div class="corner corner5 variant bottomright"></div>
<h2>5</h2>
</section>
<section class="black">
<div class="corner corner6 variant topleft"></div>
<div class="corner corner6 variant topright"></div>
<div class="corner corner6 variant bottomleft"></div>
<div class="corner corner6 variant bottomright"></div>
<h2>6</h2>
</section>/* BASE
------------------------------------------------------------ */
@import url(https://fonts.googleapis.com/css?family=VT323);
html { height: 100%; background: #EEE; }
body{
text-align: center;
font: 400 16px "VT323", Helvetica, Arial, sans-serif;
padding:0;
margin:0;
}
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
header{ margin: 0 auto; padding:20px 0; }
h1 { font-size:32px; }
h1,h2,h3,p{ margin:5px 0; padding:0 }
section h2 {
margin:0 auto;
padding:0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* Section and Corners Common
------------------------------------------------------------ */
section {
position:relative;
display:inline-block;
width:200px;
height:200px;
margin:20px;
overflow: hidden;
/*max-width:960px; margin: 30px auto;*/
}
.black {
background: #000;
/*background: rgba(0,0,0,1.0);*/
color:#fff;
box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.4);
/*transition: background 0.5s ease-in-out;*/
}
/*.black:hover { background: #333;}*/
.corner {
position: absolute;
/*background:red;*/
background:none;
width:6em;
height:6em;
font-size:2px;
font-size:10px;
opacity: 1.0;
transition: opacity 0.3s ease-in-out;
}
.corner:after {
position: absolute;
content: '';
display: block;
width:0.2em;
height:0.2em;
}
.topleft {
top:1em;
left:1em;
/* I do not know why, but it's better with this - */
-webkit-transform:rotate(360deg); transform:rotate(360deg);
}
.topright {
top:1em; right:1em; -webkit-transform:rotate(90deg); transform:rotate(90deg);
}
.bottomleft {
bottom:1em; left:1em; -webkit-transform:rotate(270deg); transform:rotate(270deg);
}
.bottomright {
bottom:1em; right:1em; -webkit-transform:rotate(180deg); transform:rotate(180deg);
}
/* Corners
------------------------------------------------------------ */
.variant:after {
width:0.1em;
height:0.1em;
}
.corner1:after {
/*transition: box-shadow 0.5s ease-in-out;*/
box-shadow:
4.2em 0em 0 #fff, 4.4em 0em 0 #fff, 4.6em 0em 0 #fff,
1.2em 0.2em 0 #fff, 1.4em 0.2em 0 #fff, 1.6em 0.2em 0 #fff, 1.8em 0.2em 0 #fff, 4em 0.2em 0 #fff, 4.8em 0.2em 0 #fff,
1em 0.4em 0 #fff, 2em 0.4em 0 #fff, 4em 0.4em 0 #fff, 4.4em 0.4em 0 #fff, 4.8em 0.4em 0 #fff,
1em 0.6em 0 #fff, 2em 0.6em 0 #fff, 4.2em 0.6em 0 #fff, 4.8em 0.6em 0 #fff,
2em 0.8em 0 #fff, 4.6em 0.8em 0 #fff,
0.4em 1em 0 #fff, 0.6em 1em 0 #fff, 0.8em 1em 0 #fff, 1em 1em 0 #fff, 1.2em 1em 0 #fff, 1.4em 1em 0 #fff, 1.6em 1em 0 #fff, 2em 1em 0 #fff, 2.4em 1em 0 #fff, 2.6em 1em 0 #fff, 2.8em 1em 0 #fff, 3em 1em 0 #fff, 3.2em 1em 0 #fff, 3.4em 1em 0 #fff, 3.6em 1em 0 #fff, 3.8em 1em 0 #fff, 4em 1em 0 #fff, 4.2em 1em 0 #fff, 4.4em 1em 0 #fff,
0.2em 1.2em 0 #fff, 2.0em 1.2em 0 #fff,
0.2em 1.4em 0 #fff, 1.0em 1.4em 0 #fff, 2.0em 1.4em 0 #fff,
0.2em 1.6em 0 #fff, 1.0em 1.6em 0 #fff, 2.0em 1.6em 0 #fff,
0.2em 1.8em 0 #fff, 1.0em 1.8em 0 #fff, 5.2em 1.8em 0 #fff,
0.4em 2.0em 0 #fff, 0.6em 2.0em 0 #fff, 1em 2.0em 0 #fff, 1.4em 2.0em 0 #fff, 1.6em 2.0em 0 #fff, 1.8em 2.0em 0 #fff, 2.0em 2.0em 0 #fff, 2.2em 2.0em 0 #fff, 2.4em 2.0em 0 #fff, 2.6em 2.0em 0 #fff, 2.8em 2.0em 0 #fff, 3em 2.0em 0 #fff, 3.2em 2.0em 0 #fff, 3.4em 2.0em 0 #fff, 3.6em 2.0em 0 #fff, 3.8em 2.0em 0 #fff, 4.0em 2.0em 0 #fff, 4.2em 2.0em 0 #fff, 4.4em 2.0em 0 #fff, 4.6em 2.0em 0 #fff, 4.8em 2.0em 0 #fff, 5.0em 2.0em 0 #fff, 5.4em 2.0em 0 #fff,
1.0em 2.2em 0 #fff, 5.2em 2.2em 0 #fff,
1.0em 2.4em 0 #fff, 2.0em 2.4em 0 #fff,
1.0em 2.6em 0 #fff, 2.0em 2.6em 0 #fff,
1.0em 2.8em 0 #fff, 2.0em 2.8em 0 #fff,
1.0em 3.0em 0 #fff, 2.0em 3.0em 0 #fff,
1.0em 3.2em 0 #fff, 2.0em 3.2em 0 #fff,
1.0em 3.4em 0 #fff, 2.0em 3.4em 0 #fff,
1.0em 3.6em 0 #fff, 2.0em 3.6em 0 #fff,
1.0em 3.8em 0 #fff, 2.0em 3.8em 0 #fff,
0.2em 4.0em 0 #fff, 0.4em 4.0em 0 #fff, 1.0em 4.0em 0 #fff, 2.0em 4.0em 0 #fff,
0em 4.2em 0 #fff, 0.6em 4.2em 0 #fff, 1.0em 4.2em 0 #fff, 2.0em 4.2em 0 #fff,
0em 4.4em 0 #fff, 0.4em 4.4em 0 #fff, 1.0em 4.4em 0 #fff, 2.0em 4.4em 0 #fff,
0em 4.6em 0 #fff, 0.8em 4.6em 0 #fff, 2.0em 4.6em 0 #fff,
0.2em 4.8em 0 #fff, 0.4em 4.8em 0 #fff, 0.6em 4.8em 0 #fff, 2.0em 4.8em 0 #fff,
2.0em 5.0em 0 #fff,
1.8em 5.2em 0 #fff, 2.2em 5.2em 0 #fff,
2.0em 5.4em 0 #fff;
}
.corner2:after {
box-shadow:
0.2em 0.2em 0 #fff, 0.4em 0.2em 0 #fff, 0.6em 0.2em 0 #fff, 0.8em 0.2em 0 #fff, 1.8em 0.2em 0 #fff, 2.0em 0.2em 0 #fff, 2.2em 0.2em 0 #fff, 3.4em 0.2em 0 #fff, 3.6em 0.2em 0 #fff, 3.8em 0.2em 0 #fff, 4.6em 0.2em #fff, 4.8em 0.2em 0 #fff, 5.0em 0.2em 0 #fff,
0.2em 0.4em 0 #fff, 0.8em 0.4em 0 #fff, 1.6em 0.4em 0 #fff, 2.4em 0.4em 0 #fff, 3.2em 0.4em 0 #fff, 4.0em 0.4em 0 #fff, 4.4em 0.4em 0 #fff, 5.2em 0.4em 0 #fff,
0.2em 0.6em 0 #fff, 1.6em 0.6em 0 #fff, 3.2em 0.6em 0 #fff, 4.2em 0.6em 0 #fff, 5.2em 0.6em 0 #fff,
0.2em 0.8em 0 #fff, 0.4em 0.8em 0 #fff, 0.6em 0.8em 0 #fff, 0.8em 0.8em 0 #fff, 1.0em 0.8em 0 #fff, 1.2em 0.8em 0 #fff, 1.6em 0.8em 0 #fff, 2.0em 0.8em 0 #fff, 2.2em 0.8em 0 #fff, 2.4em 0.8em 0 #fff, 2.6em 0.8em 0 #fff, 2.8em 0.8em 0 #fff, 3.4em 0.8em 0 #fff, 3.6em 0.8em 0 #fff, 4.2em 0.8em 0 #fff, 5.2em 0.8em 0 #fff,
1.6em 1.0em 0 #fff, 3.0em 1.0em 0 #fff, 4.2em 1.0em 0 #fff, 4.8em 1.0em 0 #fff, 5.0em 1.0em 0 #fff,
0.8em 1.2em 0 #fff, 1.6em 1.2em 0 #fff, 2.4em 1.2em 0 #fff, 3.0em 1.2em 0 #fff, 4.2em 1.2em 0 #fff,
0.8em 1.4em 0 #fff, 2.4em 1.4em 0 #fff, 3.0em 1.4em 0 #fff, 4.0em 1.4em 0 #fff,
0.4em 1.6em 0 #fff, 0.8em 1.6em 0 #fff, 1.2em 1.6em 0 #fff, 1.4em 1.6em 0 #fff, 1.6em 1.6em 0 #fff, 1.8em 1.6em 0 #fff, 2.0em 1.6em 0 #fff, 2.4em 1.6em 0 #fff, 2.8em 1.6em 0 #fff, 4.0em 1.6em 0 #fff,
0.2em 1.8em 0 #fff, 0.8em 1.8em 0 #fff, 2.4em 1.8em 0 #fff, 3.8em 1.8em 0 #fff,
0.2em 2.0em 0 #fff, 0.8em 2.0em 0 #fff, 1.6em 2.0em 0 #fff, 2.4em 2.0em 0 #fff, 3.6em 2.0em 0 #fff,
0.2em 2.2em 0 #fff, 1.6em 2.2em 0 #fff, 3.2em 2.2em 0 #fff, 3.4em 2.2em 0 #fff,
0.4em 2.4em 0 #fff, 0.6em 2.4em 0 #fff, 0.8em 2.4em 0 #fff, 1.0em 2.4em 0 #fff, 1.2em 2.4em 0 #fff, 1.6em 2.4em 0 #fff, 2.0em 2.4em 0 #fff, 2.2em 2.4em 0 #fff, 2.4em 2.4em 0 #fff, 2.6em 2.4em 0 #fff, 2.8em 2.4em 0 #fff, 3.0em 2.4em 0 #fff,
1.6em 2.6em 0 #fff,
0.8em 2.8em 0 #fff, 1.6em 2.8em 0 #fff, 2.4em 2.8em 0 #fff,
1.0em 3.0em 0 #fff, 1.2em 3.0em 0 #fff, 1.4em 3.0em 0 #fff, 2.4em 3.0em 0 #fff,
0.4em 3.2em 0 #fff, 0.6em 3.2em 0 #fff, 2.2em 3.2em 0 #fff,
0.2em 3.4em 0 #fff, 0.8em 3.4em 0 #fff, 2.2em 3.4em 0 #fff,
0.2em 3.6em 0 #fff, 0.8em 3.6em 0 #fff, 2.0em 3.6em 0 #fff,
0.2em 3.8em 0 #fff, 1.8em 3.8em 0 #fff,
0.4em 4.0em 0 #fff, 1.4em 4.0em 0 #fff, 1.6em 4.0em 0 #fff,
0.6em 4.2em 0 #fff, 0.8em 4.2em 0 #fff, 1.0em 4.2em 0 #fff, 1.2em 4.2em 0 #fff,
0.4em 4.4em 0 #fff,
0.2em 4.6em 0 #fff,
0.2em 4.8em 0 #fff, 1.0em 4.8em 0 #fff,
0.2em 5.0em 0 #fff, 1.0em 5.0em 0 #fff,
0.4em 5.2em 0 #fff, 0.6em 5.2em 0 #fff, 0.8em 5.2em 0 #fff;
}
.corner3:after {
box-shadow:
0.2em 0.2em #fff, 0.4em 0.2em #fff, 0.6em 0.2em #fff, 0.8em 0.2em #fff, 1.0em 0.2em #fff, 1.2em 0.2em #fff, 1.4em 0.2em #fff, 2.0em 0.2em #fff, 2.2em 0.2em #fff, 2.4em 0.2em #fff, 2.6em 0.2em #fff, 2.8em 0.2em #fff, 3.0em 0.2em #fff, 3.2em 0.2em #fff, 3.4em 0.2em #fff, 3.6em 0.2em #fff, 3.8em 0.2em #fff, 4.0em 0.2em #fff, 4.2em 0.2em #fff, 4.4em 0.2em #fff, 4.6em 0.2em #fff, 4.8em 0.2em #fff, 5.0em 0.2em #fff, 5.2em 0.2em #fff, 5.4em 0.2em #fff, 5.8em 0.2em #fff,
0.2em 0.4em #fff, 1.4em 0.4em #fff, 2.0em 0.4em #fff,
0.2em 0.6em #fff, 1.4em 0.6em #fff,
0.2em 0.8em #fff, 0.8em 0.8em #fff, 1.0em 0.8em #fff, 1.4em 0.8em #fff, 1.8em 0.8em #fff, 2.0em 0.8em #fff, 2.2em 0.8em #fff, 2.4em 0.8em #fff, 2.6em 0.8em #fff, 2.8em 0.8em #fff, 3.0em 0.8em #fff, 3.2em 0.8em #fff, 3.4em 0.8em #fff, 3.6em 0.8em #fff, 3.8em 0.8em #fff, 4.0em 0.8em #fff, 4.2em 0.8em #fff, 4.6em 0.8em #fff,
0.2em 1.0em #fff, 0.8em 1.0em #fff, 1.4em 1.0em #fff, 3.6em 1.0em #fff, 3.8em 1.0em #fff,
0.2em 1.2em #fff, 0.8em 1.2em #fff, 2.0em 1.2em #fff, 3.2em 1.2em #fff, 3.4em 1.2em #fff,
0.2em 1.4em #fff, 0.4em 1.4em #fff, 0.8em 1.4em #fff, 1.2em 1.4em #fff, 1.4em 1.4em #fff, 1.6em 1.4em #fff, 2.0em 1.4em #fff, 2.4em 1.4em #fff, 2.6em 1.4em #fff, 2.8em 1.4em #fff, 3.0em 1.4em #fff,
0.8em 1.6em #fff, 2.0em 1.6em #fff,
1.4em 1.8em #fff, 2.0em 1.8em #fff,
0.2em 2.0em #fff, 0.4em 2.0em #fff, 0.6em 2.0em #fff, 0.8em 2.0em #fff, 1.0em 2.0em #fff, 1.4em 2.0em #fff, 1.8em 2.0em #fff, 2.0em 2.0em #fff,
0.2em 2.2em #fff, 1.4em 2.2em #fff,
0.2em 2.4em #fff, 0.8em 2.4em #fff, 1.4em 2.4em #fff,
0.2em 2.6em #fff, 0.8em 2.6em #fff, 1.4em 2.6em #fff,
0.2em 2.8em #fff, 0.8em 2.8em #fff, 1.4em 2.8em #fff,
0.2em 3.0em #fff, 0.8em 3.0em #fff, 1.4em 3.0em #fff,
0.2em 3.2em #fff, 0.8em 3.2em #fff, 1.2em 3.2em #fff,
0.2em 3.4em #fff, 0.8em 3.4em #fff, 1.2em 3.4em #fff,
0.2em 3.6em #fff, 0.8em 3.6em #fff, 1.0em 3.6em #fff,
0.2em 3.8em #fff, 0.8em 3.8em #fff, 1.0em 3.8em #fff,
0.2em 4.0em #fff, 0.8em 4.0em #fff,
0.2em 4.2em #fff, 0.8em 4.2em #fff,
0.2em 4.4em #fff,
0.2em 4.6em #fff, 0.8em 4.6em #fff,
0.2em 4.8em #fff,
0.2em 5.0em #fff,
0.2em 5.2em #fff,
0.2em 5.4em #fff,
0.2em 5.8em #fff;
}
.corner4:after {
box-shadow:
2.8em 0em #fff, 3.0em 0em #fff, 3.2em 0em #fff,
1.2em 0.2em #fff, 1.4em 0.2em #fff, 2.6em 0.2em #fff, 3.4em 0.2em #fff,
1.0em 0.4em #fff, 1.6em 0.4em #fff, 2.4em 0.4em #fff, 3.0em 0.4em #fff, 3.6em 0.4em #fff, 5.2em 0.4em #fff, 5.6em 0.4em #fff,
1.0em 0.6em #fff, 1.6em 0.6em #fff, 2.4em 0.6em #fff, 2.8em 0.6em #fff, 3.2em 0.6em #fff, 3.6em 0.6em #fff, 4.8em 0.6em #fff,
1.6em 0.8em #fff, 3.0em 0.8em #fff, 3.6em 0.8em #fff, 4.4em 0.8em #fff,
0.4em 1.0em #fff, 0.6em 1.0em #fff, 0.8em 1.0em #fff, 1.0em 1.0em #fff, 1.2em 1.0em #fff, 1.6em 1.0em #fff, 2.0em 1.0em #fff, 2.2em 1.0em #fff, 2.4em 1.0em #fff, 2.6em 1.0em #fff, 2.8em 1.0em #fff, 3.2em 1.0em #fff, 3.4em 1.0em #fff, 4.2em 1.0em #fff,
0.2em 1.2em #fff, 1.6em 1.2em #fff, 4.0em 1.2em #fff,
0.2em 1.4em #fff, 1.0em 1.4em #fff, 2.6em 1.4em #fff, 3.8em 1.4em #fff,
0.4em 1.6em #fff, 0.6em 1.6em #fff, 1.0em 1.6em #fff, 1.4em 1.6em #fff, 1.6em 1.6em #fff, 1.8em 1.6em #fff, 2.0em 1.6em #fff, 2.8em 1.6em #fff, 3.0em 1.6em #fff, 3.2em 1.6em #fff, 3.4em 1.6em #fff, 3.6em 1.6em #fff,
1.0em 1.8em #fff, 2.2em 1.8em #fff,
1.0em 2.0em #fff, 1.6em 2.0em #fff, 2.2em 2.0em #fff,
1.0em 2.2em #fff, 1.8em 2.2em #fff, 2.0em 2.2em #fff, 2.6em 2.2em #fff,
0.4em 2.4em #fff, 0.6em 2.4em #fff, 1.0em 2.4em #fff, 2.4em 2.4em #fff,
0.2em 2.6em #fff, 1.0em 2.6em #fff, 1.4em 2.6em #fff, 2.2em 2.6em #fff, 2.6em 2.6em #fff,
0em 2.8em #fff, 0.6em 2.8em #fff, 1.0em 2.8em #fff, 1.6em 2.8em #fff,
0em 3.0em #fff, 0.4em 3.0em #fff, 0.8em 3.0em #fff, 1.6em 3.0em #fff,
0em 3.2em #fff, 0.6em 3.2em #fff, 1.0em 3.2em #fff, 1.6em 3.2em #fff,
0.2em 3.4em #fff, 1.0em 3.4em #fff, 1.6em 3.4em #fff,
0.4em 3.6em #fff, 0.6em 3.6em #fff, 0.8em 3.6em #fff, 1.6em 3.6em #fff,
1.4em 3.8em #fff,
1.2em 4.0em #fff,
1.0em 4.2em #fff,
0.8em 4.4em #fff,
0.6em 4.8em #fff,
0.4em 5.2em #fff,
0.4em 5.6em #fff;
}
.corner5:after {
box-shadow:
0.2em 0em #fff, 0.4em 0em #fff, 0.6em 0em #fff, 4.0em 0em #fff, 4.2em 0em #fff, 4.4em 0em #fff, 4.6em 0em #fff, 4.8em 0em #fff, 5.2em 0em #fff,
0em 0.2em #fff, 0.8em 0.2em #fff, 2.0em 0.2em #fff, 2.2em 0.2em #fff, 2.4em 0.2em #fff, 2.6em 0.2em #fff, 4.0em 0.2em #fff,
0em 0.4em #fff, 0.8em 0.4em #fff, 2.0em 0.4em #fff, 2.8em 0.4em #fff, 4.0em 0.4em #fff,
0em 0.6em #fff, 2.0em 0.6em #fff, 2.8em 0.6em #fff, 3.4em 0.6em #fff, 3.6em 0.6em #fff, 4.0em 0.6em #fff, 4.4em 0.6em #fff,
0.2em 0.8em #fff, 0.4em 0.8em #fff, 0.6em 0.8em #fff, 0.8em 0.8em #fff, 1.0em 0.8em #fff, 1.2em 0.8em #fff, 1.4em 0.8em #fff, 1.6em 0.8em #fff, 2.0em 0.8em #fff, 2.4em 0.8em #fff, 2.6em 0.8em #fff, 3.4em 0.8em #fff, 4.0em 0.8em #fff, 4.6em 0.8em #fff,
2.0em 1.0em #fff, 3.4em 1.0em #fff, 4.0em 1.0em #fff, 4.6em 1.0em #fff,
0.8em 1.2em #fff, 3.4em 1.2em #fff, 4.2em 1.2em #fff, 4.4em 1.2em #fff,
0.8em 1.4em #fff, 1.4em 1.4em #fff, 1.6em 1.4em #fff, 1.8em 1.4em #fff, 2.0em 1.4em #fff, 2.2em 1.4em #fff, 2.4em 1.4em #fff, 2.6em 1.4em #fff, 3.4em 1.4em #fff,
0.8em 1.6em #fff, 1.4em 1.6em #fff, 2.6em 1.6em #fff, 3.4em 1.6em #fff,
0.8em 1.8em #fff, 2.0em 1.8em #fff, 3.4em 1.8em #fff,
0.2em 2.0em #fff, 0.4em 2.0em #fff, 0.8em 2.0em #fff, 1.2em 2.0em #fff, 1.4em 2.0em #fff, 1.6em 2.0em #fff, 2.0em 2.0em #fff, 2.4em 2.0em #fff, 2.6em 2.0em #fff, 2.8em 2.0em #fff, 3.0em 2.0em #fff, 3.2em 2.0em #fff,
0.2em 2.2em #fff, 0.8em 2.2em #fff, 2.0em 2.2em #fff,
0.2em 2.4em #fff, 0.8em 2.4em #fff, 1.4em 2.4em #fff, 2.6em 2.4em #fff,
0.2em 2.6em #fff, 0.8em 2.6em #fff, 1.4em 2.6em #fff, 1.6em 2.6em #fff, 1.8em 2.6em #fff, 2.0em 2.6em #fff, 2.2em 2.6em #fff, 2.6em 2.6em #fff, 3.0em 2.6em #fff, 3.2em 2.6em #fff,
0.4em 2.8em #fff, 0.6em 2.8em #fff, 2.6em 2.8em #fff, 3.4em 2.8em #fff,
2.0em 3.0em #fff, 2.6em 3.0em #fff, 3.4em 3.0em #fff,
2.0em 3.2em #fff, 2.6em 3.2em #fff, 3.4em 3.2em #fff,
0.6em 3.4em #fff, 0.8em 3.4em #fff, 1.0em 3.4em #fff, 1.2em 3.4em #fff, 1.4em 3.4em #fff, 1.6em 3.4em #fff, 1.8em 3.4em #fff, 2.8em 3.4em #fff, 3.0em 3.4em #fff, 3.2em 3.4em #fff, 3.4em 3.4em #fff,
0.6em 3.6em #fff, 3.6em 3.6em #fff,
0.6em 3.8em #fff,
0em 4.0em #fff, 0.2em 4.0em #fff, 0.6em 4.0em #fff, 1.0em 4.0em #fff,
0em 4.2em #fff, 0.6em 4.2em #fff, 1.2em 4.2em #fff,
0em 4.4em #fff, 0.6em 4.4em #fff, 1.2em 4.4em #fff,
0em 4.6em #fff, 0.8em 4.6em #fff, 1.0em 4.6em #fff,
0em 4.8em #fff,
0em 5.2em #fff;
}
.corner6:after {
box-shadow:
0.6em 0em #fff, 0.8em 0em #fff, 1.4em 0em #fff, 1.6em 0em #fff, 2.4em 0em #fff, 2.6em 0em #fff,
0.6em 0.2em #fff, 1.0em 0.2em #fff, 1.2em 0.2em #fff, 1.6em 0.2em #fff, 2.2em 0.2em #fff, 2.8em 0.2em #fff, 4.2em 0.2em #fff,
0.8em 0.4em #fff, 1.6em 0.4em #fff, 2.4em 0.4em #fff, 2.8em 0.4em #fff, 3.2em 0.4em #fff, 3.4em 0.4em #fff, 3.6em 0.4em #fff, 4.0em 0.4em #fff, 4.4em 0.4em #fff, 4.8em 0.4em #fff, 5.2em 0.4em #fff,
0em 0.6em #fff, 0.2em 0.6em #fff, 1.0em 0.6em #fff, 1.6em 0.6em #fff, 2.8em 0.6em #fff, 4.2em 0.6em #fff,
0em 0.8em #fff, 0.4em 0.8em #fff, 1.6em 0.8em #fff, 2.6em 0.8em #fff,
0.2em 1.0em #fff, 0.6em 1.0em #fff, 0.8em 1.0em #fff, 1.0em 1.0em #fff, 1.2em 1.0em #fff, 1.6em 1.0em #fff, 2.0em 1.0em #fff, 2.2em 1.0em #fff, 2.4em 1.0em #fff,
0.2em 1.2em #fff, 1.6em 1.2em #fff,
0em 1.4em #fff, 1.0em 1.4em #fff, 1.8em 1.4em #fff,
0em 1.6em #fff, 0.2em 1.6em #fff, 0.4em 1.6em #fff, 0.6em 1.6em #fff, 1.0em 1.6em #fff, 2.0em 1.6em #fff,
1.0em 1.8em #fff, 1.4em 1.8em #fff, 2.0em 1.8em #fff,
1.0em 2.0em #fff, 1.6em 2.0em #fff, 1.8em 2.0em #fff, 2.0em 2.0em #fff,
0.2em 2.2em #fff, 1.0em 2.2em #fff, 2.2em 2.2em #fff, 2.6em 2.2em #fff,
0em 2.4em #fff, 0.4em 2.4em #fff, 1.0em 2.4em #fff,
0em 2.6em #fff, 0.8em 2.6em #fff, 2.2em 2.6em #fff,
0.2em 2.8em #fff, 0.4em 2.8em #fff, 0.6em 2.8em #fff,
0.4em 3.2em #fff,
0.4em 3.4em #fff,
0.4em 3.6em #fff,
0.4em 4.0em #fff,
0.2em 4.2em #fff, 0.6em 4.2em #fff,
0.4em 4.4em #fff,
0.4em 4.8em #fff,
0.4em 5.2em #fff;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.