Div with cut out edges, border and transparent background, how to add the cut out edges to the upper left and bottom right corner as well?

Question

So according to this question Div with cut out edges, border and transparent background and the answer demo on codepen: http://codepen.io/web-tiki/pen/Dvgqn, how do you modify the codepen in the least number of code changes to also have the upper left and bottom right corners become cut out as well?

Here's the code from the codepen:

div{
    position:relative;
    width:50%;
    height:300px;
    margin:10% auto;
    background:rgba(0, 0, 0, 0.7);
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);
}
div:before, div:after{
    content:'';
    position:absolute;
    top:-6px;
    width:20%; height:100%;
}
div:before{
    right:100%;
    background:inherit;
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-left:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);

    -webkit-transform-origin:100% 0;
    transform-origin:100% 0;

    -webkit-transform : perspective(1px) rotateY(-0.15deg);
    transform : perspective(1px) rotateY(-0.15deg);
}

div:after{
    left:100%;
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-right:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);
    border-left:none;
    background:inherit;

    -webkit-transform-origin:0 100%;
    transform-origin:0 100%;

    -webkit-transform : perspective(1px) rotateY(0.15deg);
    transform : perspective(1px) rotateY(0.15deg);
}

/*following just for demo */


body, html{
    height:100%;
    margin:0;
}
body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
    background-size:cover;
    color:#fff;
    font-size:1.2em;
    font-family:arial;
}

And the placeholder div:

<div>
    <h1>Title here</h1>
    <p>some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here...</p>
</div>

I am not sure how exactly the answer to the aforementioned question even works, I just copy pasted it. Any insight would be amazing! Thank you so much, I will try to figure this out myself and keep you posted as well.

I was able to modify the angle of the edge cut by changing the degrees and perspective px, but am not sure what I need to add to make the cuts also appear on the upper left and bottom right. Will keep you posted!

Answer 1

Seems that simplifying the transform code works. Just change those 4 lines, and voila.

Precisely, this:

div:before {
  -webkit-transform-origin:100% 0;
  transform-origin:100% 0;
}
div:after {
  -webkit-transform-origin:0 100%;
  transform-origin:0 100%;
}

becomes this:

div:before {
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}
div:after {
  -webkit-transform-origin: 0;
  transform-origin: 0;
}

See it here: http://jsfiddle.net/ryanpcmcquen/pxm3beyL/

Full code:

div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 10% auto;
  background: rgba(0, 0, 0, 0.7);
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20%;
  height: 100%;
}
div:before {
  right: 100%;
  background: inherit;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-left: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
  -webkit-transform: perspective(1px) rotateY(-0.15deg);
  transform: perspective(1px) rotateY(-0.15deg);
}
div:after {
  left: 100%;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-right: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  border-left: none;
  background: inherit;
  -webkit-transform-origin: 0;
  transform-origin: 0;
  -webkit-transform: perspective(1px) rotateY(0.15deg);
  transform: perspective(1px) rotateY(0.15deg);
}
/*following just for demo */

body,
html {
  height: 100%;
  margin: 0;
}
body {
  background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
  background-size: cover;
  color: #fff;
  font-size: 1.2em;
  font-family: arial;
}

<div>
  <h1>Title here</h1>

  <p>some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here...</p>
</div>