css - 你如何阻止我的 :after 元素扩展屏幕？

Question

所以我试图在我的网页上设计一个英雄背景，它有三个相邻的倾斜颜色。但是，我遇到了这个问题，页面被水平扩展并在底部添加了一个滚动条。这是我的代码：

        .container-slant {
            overflow: hidden;
            width: 100%;
            background-color: rgb(246, 234, 212);
            min-height: 100vh;
        }
        .container-slant:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 20%;
            transform: skew(-10deg);
            background: #fcb525;
            transform-origin: top;
        }
        .container-slant:after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 20%;
            transform: skew(-10deg);
            background: #f9ad87;
            transform-origin: bottom;
        }

标签： css