Multiple Cut Corners - ANIMATED

index.html

<div class="center-text">
  <h1>Multiple Cut Corner Interface Element</h1>
  <div id="tog" class="polygon-out clps">
    <div class="anchor-left">
      <div id="x" class="x">
        &#10006;
      </div>
    </div>
    <div class="anchor-right">
      <div class="btns btn-1">
      </div>
      <div class="btns btn-2">
      </div>
      <div class="btns btn-3">
      </div>
    </div>
    <div class="polygon-in">
      <img class="polygon-clip" src="https://www.crosscountrystaffing.com/image/9-23-15-1.jpg" alt="Multiple cut corner clipping">
    </div>
  </div>
</div>
</div>

Multiple Cut Corners - ANIMATED.markdown

Multiple Cut Corners - ANIMATED

A Pen by Chris Johnston on CodePen.

License.

script.js

// First we detect the click event
document.getElementById('x').addEventListener('click', function() {
  if (document.getElementById('tog').classList.contains('clps')) {
    document.getElementById('tog').classList.remove('clps');
  } else {
    // The user obviously can't follow instructions so let's alert them of what is supposed to happen next
    document.getElementById('tog').classList.add('clps');
  }
});

style.css

body {
  background-color: #e6e6e6;
  background-image: url(http://www.transparenttextures.com/patterns/absurdity.png);
}

h1 {
  font-family: sans-serif;
}

.center-text {
  text-align: center;
  margin: 0 auto;
  width: 41em;
}

#x {
  z-index: 102;
}

.anchor-left {
  position: relative;
  width: 0;
  height: 0;
}

.anchor-right {
  float: right;
  position: relative;
  width: 0;
  height: 0;
}

.x {
  color: #000;
  position: absolute;
  top: 0;
  left: 7px;
  opacity: 0;
  float: left;
  overflow: auto;
  -webkit-transition: all 0.1s linear;
  transition: all 0.1s linear;
  z-index: 99;
}

.btns {
  position: absolute;
  background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
  background-image: linear-gradient(top, #f4f1ee, #fff);
  border-radius: 50%;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204, 198, 197, .5);
  height: 22px;
  width: 22px;
  -webkit-transition: all .05s linear;
  transition: all .05s linear;
  z-index: 99;
}

.btn-1 {
  right: 88px;
  top: 8px;
}

.btn-2 {
  right: 58px;
  top: 28px;
}

.btn-3 {
  right: 28px;
  top: 48px;
}

.btns:hover {
  height: 24px;
  width: 24px;
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
  z-index: 101;
}

.polygon-out {
  width: 41em;
  min-height: 27em;
  padding: 8px 3px 8px 3px;
  background: rgba(55, 55, 55, 0.3);
  text-align: center;
  -webkit-clip-path: polygon(7% 0, 75% 0, 100% 25%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 7%);
  clip-path: polygon(5% 0, 85% 0, 100% 15%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-transition-timing-function: ease; 
  transition-timing-function: ease;
}

.polygon-out:hover {
  text-align: center;
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 0);
  clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 0);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-transition-timing-function: ease; 
  transition-timing-function: ease;
}

.polygon-out:hover .x {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.x:hover {
  color: #fff;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}

.polygon-in {
  background: #fff;
  text-align: center;
  width: 98%;
  height: 98%;
  margin: 0 6px;
  -webkit-clip-path: polygon(7% 0, 75% 0, 100% 25%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 7%);
  clip-path: polygon(7% 0, 75% 0, 100% 25%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 7%);
}

.polygon-clip {
  padding: 5px;
  width: 98%;
  height: 98%;
  -webkit-clip-path: polygon(8% 0, 73% 0, 100% 27%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 8%);
  clip-path: polygon(8% 0, 73% 0, 100% 27%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 8%);
}

.clps {
  width: 20em;
  min-height: 0;
  -webkit-clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 30%);
  clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 30%);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.clps:hover {
  -webkit-clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 30%);
  clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 0 30%);
}

.clps .x {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.clps :nth-child(3){
  height: 5em;
  -webkit-clip-path: polygon(10% 0, 93.5% 0, 98% 25%, 98% 75%, 93.5% 100%, 4.5% 100%, 0 75%, 0 45%);
  clip-path: polygon(7% 0, 75% 0, 100% 25%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 7%);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.clps :nth-child(3) img{
  display: none;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.clps :nth-child(2){
  display: none
}