有裁剪边缘，边框和透明背景的Div，如何添加裁剪边缘到左上角和右下角

Question

所以根据这个问题div切割边缘，边界和透明背景和答案演示在codepen: http://codepen。io/web-tiki/pen/Dvgqn，如何在最少的代码更改中修改代码依赖，同时使左上角和右下角也被剪掉?

下面是来自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;
}

和占位符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>

我不确定前面提到的问题的答案到底是如何工作的，我只是复制粘贴了它。任何见解都是惊人的!非常感谢，我会自己想办法解决这个问题，也会随时通知你。

我能够通过改变角度和透视px来修改边缘切割的角度，但我不确定我需要添加什么来使切割也出现在左上角和右下角。我会随时通知你!

Answer 1

似乎简化了transform代码。只要改变这4行，瞧!

准确地说,这个:

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

变成这样:

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

请看这里:http://jsfiddle.net/ryanpcmcquen/pxm3beyL/

完整代码:

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>

Answer 2

我使用了-webkit-transform-origin和transform-origin属性，

唯一的区别是改变

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

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

中的div:before，并更改

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

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

在

之后

这是新的codependency:http://codepen.io/anon/pen/YyyXzE