Shutter Css
<div class="content">
	Buuff!
</div>
<div class="shutter" title="Click!">
	<div></div><div></div><div></div>
</div>
* {
  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);
}

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");
});