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

Question

所以根据这个问题Div with cut out edges, border and transparent background and the answer demo on 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%;

在div:after

这是新的代码笔： http://codepen.io/anon/pen/YyyXzE

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

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?

html

css

css-shapes