Html 如何在CSS中创建重叠的3d背景？_Html_Css

Html 如何在CSS中创建重叠的3d背景？

html css

Html 如何在CSS中创建重叠的3d背景？,html,css,Html,Css,! 我想使用CSS实现类似的功能。如何做到这一点我喜欢黄色背景的3d效果。嗯，不能说我有最好的解决方案，但下面是我解决问题的方法一种方法是将背景图像切片，然后定位它们，以便获得所需的视觉效果。在PhotoShop（或您选择的图像编辑器）中制作资产，然后将其导出为碎片。一点绝对定位，你可以有一个横幅，将工作在大多数浏览器没有很多工作。不过，这不是一个特别有趣的方法（也不需要太多解释），所以让我提出其他建议第二种方法是只使用CSS的解决方案，使用：after伪类和CSS三角形（如果您想了解更多

我想使用CSS实现类似的功能。如何做到这一点

我喜欢黄色背景的3d效果。

嗯，不能说我有最好的解决方案，但下面是我解决问题的方法

一种方法是将背景图像切片，然后定位它们，以便获得所需的视觉效果。在PhotoShop（或您选择的图像编辑器）中制作资产，然后将其导出为碎片。一点绝对定位，你可以有一个横幅，将工作在大多数浏览器没有很多工作。不过，这不是一个特别有趣的方法（也不需要太多解释），所以让我提出其他建议

第二种方法是只使用CSS的解决方案，使用

：after

伪类和CSS三角形（如果您想了解更多关于三角形的内容，）。尝试分解结构，这样您就可以很好地了解HTML的外观-我将其分解为正文、主div（白色）、横幅区域和横幅的右/左边缘。在代码中（注意我省略了主体）：

这背后的关键元素是绝对定位的边缘元素（位于横幅右/左侧的负距离等于其宽度），其背景颜色与横幅相同，以便看起来延伸横幅。每个元素的

：后面的元素是产生假3D效果的原因；它们中的每一个都会形成一个三角形，设置为与横幅不同的颜色。三角形定位使其看起来像横幅环绕主div，从而创建3D效果
下面是一个演示代码的示例
希望这有帮助！同样，这当然不是唯一的方法，但它确实解决了您的问题。如果您有任何问题，请告诉我，我很乐意提供进一步帮助。
您是从网站上获得此信息的吗？这只是两个深黄色三角形的绝对位置。我本来打算发布我自己的答案，但我想这与您的答案太相似了。不管怎样，除了代码更简洁外，哪一个或多或少是相同的。哇，你的太棒了，它太短了！我个人还没有对：before
和：after做过那么多的工作，所以我还不擅长有效地使用它们。
<body>
    <div class="main">
        <p>Some content</p>
        <div class="banner">
            <span>I'm a banner!</span>
            <div class="left-edge"></div>
            <div class="right-edge"></div>
        </div>
    </div>
</body>

body {
    background:#CCCCCC;
}
.main {
    background:#FFFFFF;
    width:600px;
    margin:0 auto;
    height:100%;
}
.banner {
    width:100%;
    height:100px;
    background:#AAAAAA;
    position:relative;
}
.left-edge {
    background:#AAAAAA;
    position:absolute;
    width:20px;
    height:100%;
    left:-20px;
    top:0;
}
/* Triangle left */
 .left-edge:after {
    width:0;
    height:0;
    border-left:20px solid transparent;
    border-right:0 solid transparent;
    border-top:20px solid #777777;
    content:"";
    position:absolute;
    left:0;
    bottom:-20px;
}
.right-edge {
    background:#AAAAAA;
    position:absolute;
    width:20px;
    height:100%;
    right:-20px;
    top:0;
}
/* Triangle right */
 .right-edge:after {
    width:0;
    height:0;
    border-left:0 solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #777777;
    content:"";
    position:absolute;
    right:0;
    bottom:-20px;
}