html - CSS :after tag with background image and %

Question

所以我有以下代码，它在 div 的顶部放置了一个倾斜的白色边框(我有一个后标签在底部弹出另一个标签) - 我的问题是让它响应 - 当我缩小我的窗口时图像似乎没有停留在左上角和左下角，它们向下和向上移动，在顶部和底部留下一大块彩色 block ，我试图隐藏它并使它在这个过程中看起来倾斜......

.fixed-width-container {
    width:60%;
    margin:0px auto;
    float:left;
    .slant {

    position: relative;
        &:before {
            content:"";
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:94px;
            background-image: url('images/angle.png');
            background-repeat: no-repeat;
            background-position: top left;
            background-size:100%;
            z-index: 0;
            display: block;
            -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);              
        }               
    }
}

有什么办法让他们留在原地吗？ % height 也不起作用......

干杯:)

Answer 1

最后改了我的代码!我没有使用图像，而是使用了一个白色 block 并旋转了它:

.slant {
position: relative;
&:after {
    display: block;
    content: "";
    color: transparent;
    width: 100%;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: -10px;
    bottom: -50px;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}
&:before {
    display: block;
    content: "";
    color: transparent;
    width: 100%;
    height: 100px;
    background: #ffffff;
    position: absolute;
    left: -10px;
    top: -50px;
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}
}