如何创建有角度的双边框效果CSS

Question

我遇到了this codepen（滚动到底部），我想知道如何创建这里看到的边框效果：

我已经阅读了代码，但我希望有人可以解释一种创建此效果的简单方法。 我相信它应该通过在另一个上分层div来完成，但我无法弄清楚确切的方式：

<div class="outer">
 <div class="inner">
   <p>Text here</p>
 </div>
</div>

Answer 1

通过使用 transform CSS属性，元素在文档流中的位置方面保持完全相同的位置，但是根据转换进行渲染。通过这种方式，您可以调整元素的呈现方式，而不会影响文档流（因此其他内容不会跳转到页面周围尝试重新填充页面。

在您的情况下，一些带有彩色边框的透明元素已添加到页面中，并且它们已经稍微改变了：

transform: rotate(3deg) scale(1.01);

transform的问题是您必须通过Autoprefixer运行它，以便它成为跨浏览器：

-webkit-transform: rotate(3deg) scale(1.01);
   -moz-transform: rotate(3deg) scale(1.01);
    -ms-transform: rotate(3deg) scale(1.01);
     -o-transform: rotate(3deg) scale(1.01);
        transform: rotate(3deg) scale(1.01);

工作示例：

body {
  margin: 0;
  color: rgba(255,255,255,.87);
  background-color: #212121;
}
.white-border {
  margin: 2rem auto;
  max-width: 80vw;
  min-height: 50vh;
  position: relative;
  padding: 2rem;
  border: 2px solid rgba(255,255,255,.87);
  overflow: visible;
}
.second-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(3deg) scale(1.01);
   -moz-transform: rotate(3deg) scale(1.01);
    -ms-transform: rotate(3deg) scale(1.01);
     -o-transform: rotate(3deg) scale(1.01);
        transform: rotate(3deg) scale(1.01);
  border: 2px solid #cf9;
}

<div class="white-border">
  <div class="second-border"></div>
  Your content goes here...
</div>

Answer 2

请尝试以下代码

.outer {
  border: 1px solid red;
  width: 400px;
  height: 320px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
  position: relative;
  z-index: 9999;
  margin-left: 10px;
  margin-top: 20px;
}
.inner {
  border: 1px solid blue;
  width: 100%;
  height: 320px;
  margin: 0 auto;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
  padding: 20px;
  box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <p>Text here</p>
  </div>
</div>

Answer 3

答案在您链接的codepen中。这是简化的：

http://codepen.io/sol_b/pen/QKjZQb

div应该是这样的：

<div class="box">
<div class="rotated-box"></div>
  your content
</div>