HTML


<div class="content">
	Buuff!
</div>
<div class="shutter" title="Click!">
	<div></div><div></div><div></div>
</div>

CSS


* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: white;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
	transform: translate(-50%, -50%);
  text-align: center;
  font-size: 5rem;
  font-weight: bold;
  color: #1d7077;
  font-family: sans-serif;
}
.shutter {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  transition: all .8s ease;
	cursor: pointer;
}
@media (orientation: landscape) {
	.shutter.open {
		width: 176vw;
		height: 176vw;
		margin-left: -88vw;
		margin-top: -88vw;
		transform: rotate(180deg);
		}
}
@media (orientation: portrait) {
	.shutter.open {
		width: 176vh;
		height: 176vh;
		margin-left: -88vh;
		margin-top: -88vh;
		transform: rotate(180deg);
		}
}
:root {
	---line-size: 0.02rem;
}
.shutter > div {
	position: absolute;
	width: 100%;
	height: 57.735026918962575%;
  top: 21.132486540518713%;
  /*
  - 57.735026918962575% = width / 2 / Math.cos(30 * (Math.PI / 180));
  - 21.132486540518713% = (100% - height) / 2;
  */
}
.shutter > div::before,
.shutter > div::after {
  position: absolute;
  content: '';
  height: 500px;
  width: 1000px;
  background: #1d7077;
  transform: rotate(30deg) skew(30deg);
}
.shutter > div::before {
  bottom: 0;
  right: 100%;
  border-right: var(---line-size) solid #fefefe;
  transform-origin: 100% 100%;
}
.shutter > div::after {
  top: 0;
  left: 100%;
  border-left: var(---line-size) solid #fefefe;
  transform-origin: 0 0;
}
.shutter > div:nth-child(2) {
  transform: rotate(60.2deg);
}
.shutter > div:nth-child(3) {
  transform: rotate(120.2deg);
}



JS


function clickedClassHandler(name,callback) {

    var allElements = document.body.getElementsByTagName("*");

    for(var x = 0, len = allElements.length; x < len; x++) {
        if(allElements[x].className == name) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var elmParent = this.parentNode;
        var parentChilds = elmParent.childNodes;
        var index = 0;

        for(var x = 0; x < parentChilds.length; x++) {
            if(parentChilds[x] == this) {
                break;
            }

            if(parentChilds[x].className == name) {
                index++;
            }
        }
        callback.call(this,index);
    }
}
clickedClassHandler("shutter",function(index){
	this.classList.toggle("open");
});




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