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

Question

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

我已经通读了代码，但我希望有人能解释一种创建这种效果的简单方法。我认为这应该通过将 div 叠加在一起来完成，但我无法弄清楚确切的方法：

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

Answer 1

答案在您链接的代码笔中。这是简化版：

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

div 应如下所示：

<div class="box">
<div class="rotated-box"></div>
  your content
</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

通过使用 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>

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

How to create angled double border effect CSS

html

css

transform

border