Question

我有两个相邻的元素：

英雄Div，带有背景图片
该元素下方的高度为60px的元素

我给了Hero Div一个剪切路径，以稍微向上倾斜图像的右下角。我需要下面的div来匹配角度，因此我给了它一个transform: rotate(x)属性。唯一的问题是，随着英雄div随其百分比缩放，转换后的div不会随其缩放，因此根据大小在左边或右边留出空白。

我确信这对很多人来说是一件容易的事，但我想不出适合生产的方法。

div(id="front")
    section(class="hero overlay")
        main
            h1 xxx
    div(class="angled")

想象一下这个灰色框的右下角向上倾斜，以产生倾斜的效果。

Answer 1

我这样解决了：

.hero {
        background-image: url(../images/hero.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 250px;
        width: 100%;
}

.angled {
        background-color: #fff;
        border-top: 60px solid color('one');
        padding-bottom: 40px;
        margin-top: -40px;
        transform: rotate(-2.5deg);
        width: 110vw;
        z-index: 99;
}

作为经典的移动优先方法，背景英雄图像只能获得250px的高度。角度div是金钱所在。底部填充以及z索引可防止英雄图像溢出（隐藏）在底部。负的margin-top值将div向上拉，并将其与英雄图像的左下角对齐。

我使英雄图像本身倾斜，但决定将其删除，这样我就不必担心两个具有相同响应角度的元素。

希望其他人看到这一点，并采取类似的移动优先方式。

旋转两个相邻元素

1 个答案: