Question

所以我有以下代码，它在div的顶部放置一个倾斜的白色边框（我有一个后标记在底部弹出另一个） - 我的问题是使这个响应 - 当我缩小窗口时图像似乎不会保持左上角和左下角，它们向下和向上移动，释放出一大块彩色块顶部和底部，我试图将其隐藏起来并使其看起来在这个过程中出现歪斜...

.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);              
        }               
    }
}

任何想法如何让他们留下来？％高度也不能完成......

干杯：）

Answer 1

最后改变了我的代码！而不是使用图像我使用白色块并旋转它：

.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);
}
}

CSS：带有背景图片的标签和％之后

1 个答案: