Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save CJohnDesign/cc54528d207b193351d3 to your computer and use it in GitHub Desktop.
Save CJohnDesign/cc54528d207b193351d3 to your computer and use it in GitHub Desktop.
Multiple Cut Corners - ANIMATED
<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>
// 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');
}
});
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment