html - 带有切边、边框和透明背景的div，如何将切边添加到左上角和右下角？

Question

所以根据这个问题Div with cut out edges, border and transparent background以及 codepen 上的答案演示: http://codepen.io/web-tiki/pen/Dvgqn ，如何以最少的代码更改修改codepen，同时将左上角和右下角也剪掉？

这是来自 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>

我不确定上述问题的答案到底如何工作，我只是复制粘贴它。任何见解都会令人惊奇!非常感谢您，我会尝试自己解决这个问题并随时通知您。

我可以通过更改度数和透视像素来修改边缘切割的 Angular ，但不确定需要添加什么才能使切割也出现在左上角和右下角。会随时通知您!

Answer 1

似乎简化转换代码是有效的。只需更改这 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>