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

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

我已经通读了代码，但我希望有人能解释一种创造这种效果的简单方法。 我认为应该通过将div相互叠放来实现，但我想不出确切的方法：

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

此处文本

答案在您链接的代码栏中。这就是它的简化：

div应该如下所示：

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

你的内容

答案在您链接的代码栏中。这就是它的简化：

div应该如下所示：

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

你的内容

请尝试下面的代码

.outer{
边框：1px纯红；
宽度：400px；
高度：320px；
-webkit变换：旋转（5度）；
-moz变换：旋转（5度）；
变换：旋转（5度）；
位置：相对位置；
z指数：9999；
左边距：10px；
边缘顶部：20px；
}
.内部{
边框：1px纯蓝色；
宽度：100%；
高度：320px；
保证金：0自动；
-webkit变换：旋转（-5度）；
-moz变换：旋转（-5度）；
变换：旋转（-5度）；
填充：20px；
框大小：边框框；
}

此处文本

请尝试下面的代码

.outer{
边框：1px纯红；
宽度：400px；
高度：320px；
-webkit变换：旋转（5度）；
-moz变换：旋转（5度）；
变换：旋转（5度）；
位置：相对位置；
z指数：9999；
左边距：10px；
边缘顶部：20px；
}
.内部{
边框：1px纯蓝色；
宽度：100%；
高度：320px；
保证金：0自动；
-webkit变换：旋转（-5度）；
-moz变换：旋转（-5度）；
变换：旋转（-5度）；
填充：20px；
框大小：边框框；
}

此处文本

通过使用CSS属性，元素在文档流中的位置保持完全相同，但根据转换进行渲染。通过这种方式，您可以在不影响文档流的情况下调整元素的呈现方式（这样其他内容就不会在试图重新填充页面时跳过页面）

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

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

transform

的问题是您必须运行它，使其成为跨浏览器：

-webkit变换：旋转（3deg）比例（1.01）；
-moz变换：旋转（3deg）比例（1.01）；
-ms变换：旋转（3deg）比例（1.01）；
-o变换：旋转（3deg）比例（1.01）；
变换：旋转（3deg）比例（1.01）；

工作示例：

正文{
保证金：0；
颜色：rgba（255255255.87）；
背景色：#212121；
}
.白边{
保证金：2rem自动；
最大宽度：80vw；
最小高度：50vh；
位置：相对位置；
填充：2rem；
边框：2倍实心rgba（255255.87）；
溢出：可见；
}
.第二边界{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
-webkit变换：旋转（3deg）比例（1.01）；
-moz变换：旋转（3deg）比例（1.01）；
-ms变换：旋转（3deg）比例（1.01）；
-o变换：旋转（3deg）比例（1.01）；
变换：旋转（3deg）比例（1.01）；
边框：2px实心#cf9；
}

你的内容放在这里。。。

通过使用CSS属性，元素在文档流中的位置保持完全相同，但根据转换进行呈现。通过这种方式，您可以调整元素的呈现方式，而不会影响文档流（这样其他内容就不会在试图重新填充页面的页面上跳跃）

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

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

transform

的问题是您必须运行它，使其成为跨浏览器：

-webkit变换：旋转（3deg）比例（1.01）；
-moz变换：旋转（3deg）比例（1.01）；
-ms变换：旋转（3deg）比例（1.01）；
-o变换：旋转（3deg）比例（1.01）；
变换：旋转（3deg）比例（1.01）；

工作示例：

正文{
保证金：0；
颜色：rgba（255255255.87）；
背景色：#212121；
}
.白边{
保证金：2rem自动；
最大宽度：80vw；
最小高度：50vh；
位置：相对位置；
填充：2rem；
边框：2倍实心rgba（255255.87）；
溢出：可见；
}
.第二边界{
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
-webkit变换：旋转（3deg）比例（1.01）；
-moz变换：旋转（3deg）比例（1.01）；
-ms变换：旋转（3deg）比例（1.01）；
-o变换：旋转（3deg）比例（1.01）；
变换：旋转（3deg）比例（1.01）；
边框：2px实心#cf9；
}

你的内容放在这里。。。

你的codepen链接似乎与你发布的图像无关。请参阅钢笔底部@AlFonceIn codepen，作者刚刚将CSS3的嵌套属性用于layered

div

创建该效果，你应该研究如何实现该效果。你的codepen链接似乎与你发布的图像无关。请参阅钢笔底部@AlFonceIn codepen，作者刚刚为layered

div

使用了CSS3的嵌套属性来创建这种效果，您应该研究如何实现它。