HTML


<div id="position">
  <figure class="triangle">
	<img src="#?+" />
	<figure>
	<figure class="emme">
	<img src="#?+" />
	<figure>
	<figure class="emme1">
	<img src="#?+" />
	<figure>
	<figure class="emme2">
	<img src="#?+" />
	<figure>
	<figure class="emme3">
	<img src="#?+" />
	<figure>
	<figure class="emme4">
	<img src="#?+" />
		<figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
    </figure>
</div>


CSS


/**
// CSS /shape > Pure CSS Logo ///M ( bmw logo )
*
// @webbeloz > lab
*
*/
html, body {
  height: 100%;
  margin: 0;
}
#position {
  position: absolute;
  top: 50%;
  left: 57%;
  transform: translate(-50%, -50%);
}
figure{
	display:block;
	height:200px;
}
figure > .emme2:before,
figure > .emme3:before{
	display:block;
	height:100px !important;
	/*display:none;*/
}
img {
	display: block;
	width: 50%;
	height:0px;
	opacity:0;
}
.triangle {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 80%;
	float: left;
}

.triangle:after,
.triangle:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -127%;
   width      : 300%;
   height     : 25%;
   display    : block;   
}

.triangle:before { 
    top: -19%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : #2E9AFE;
}

.triangle:after { 
    bottom: 50%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : #013ADF;
}

/* Emme ///M */
.emme:after,
.emme:before {
   content    : "";
   position   : absolute;
   z-index    : 3;
   left       : -111%;
   width      : 300%;
   height     : 25%;
   display    : block;   
}

.emme:before { 
    top: 0%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : none;
}

.emme:after { 
    bottom: 100%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : red;
}

/* Emme ///M 1 */
.emme1:after,
.emme1:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -103%;
   width      : 300%;
   height     : 22%;
   display    : block;   
}

.emme1:before { 
    top: 0%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : #c2c2c2;
}

.emme1:after { 
    bottom: 103%;  
    -webkit-transform: rotate(-60deg); 
    -moz-transform: rotate(-60deg); 
    transform: rotate(-60deg);
	background : #c2c2c2;
}

/* Emme ///M 2 */
.emme2:after,
.emme2:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -100%;
   width      : 300%;
   height     : 5%;
   display    : block;   
}

.emme2:before { 
    top: -20%;  
    -webkit-transform: rotate(75deg); 
    -moz-transform: rotate(75deg); 
    transform: rotate(75deg);
	background : #c2c2c2;
}

.emme2:after { 
    bottom: -0%;  
    -webkit-transform: rotate(75deg); 
    -moz-transform: rotate(75deg); 
    transform: rotate(75deg);
	background : #c2c2c2;
}

/* Emme ///M 3 */
.emme3:after,
.emme3:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -80%;
   width      : 300%;
   height     : 0%;
   display    : block;   
}

.emme3:before { 
    top: -15%;  
    -webkit-transform: rotate(-65deg); 
    -moz-transform: rotate(-65deg); 
    transform: rotate(-65deg);
	background : #c2c2c2;
}

.emme3:after { 
    bottom: 120%;  
    -webkit-transform: rotate(-65deg); 
    -moz-transform: rotate(-65deg); 
    transform: rotate(-65deg);
	background : #c2c2c2;
}

/* Emme ///M 4 */
.emme4:after,
.emme4:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -68%;
   width      : 300%;
   height     : 20%;
   display    : block;   
}

.emme4:before { 
    bottom: -240%;  
    -webkit-transform: rotate(85deg); 
    -moz-transform: rotate(85deg); 
    transform: rotate(85deg);
	background : #c2c2c2;
	/*box-shadow:0 10px 3px black;*/
}

.emme4:after { 
    bottom: -20%;  
    -webkit-transform: rotate(85deg); 
    -moz-transform: rotate(85deg); 
    transform: rotate(85deg);
	background : #c2c2c2;
}


JS




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now