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>

我不确定上述问题的答案到底是怎么回事，我只是复制粘贴它。任何见解都会令人惊叹！非常感谢你，我会尝试自己解决这个问题并让你发布。

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

Answer 1

似乎简化了div:before { -webkit-transform-origin: 100%; transform-origin: 100%; } div:after { -webkit-transform-origin: 0; transform-origin: 0; }代码的工作原理。只需更改这4行，瞧。

准确地说，这个：

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>

请在此处查看：search and don't replace

完整代码：

UITableViewController

UITableViewController

Answer 2

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

唯一的区别是改变

[{<<"-----------------------------9807164986589917941183868187\r\nContent-Disposition: form-data; name">>, <<"\"0\"\r\n\r\n[object HTMLInputElement]\r\n-----------------------------9807164986589917941183868187\r\nContent-Disposition: form-data; name=\"params\"\r\n\r\nkey=162">>}, {<<"profileID">>,<<"24">>}, {<<"testiing">>, <<"123\r\n-----------------------------9807164986589917941183868187--\r\n">>}], 19])

到

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

div中的

：之前和之后

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

到

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

div中的

：在

之后

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

Div有切边，边框和透明背景，如何在左上角和右下角添加切边？

2 个答案: