旋转两个相邻的元素

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-index可防止英雄图像溢出底部（隐藏它）。负边距 - 顶部值将div向上拉，并将其与英雄图像的左下角对齐。

我让英雄形象本身有角度，但决定将其取出，这样我就不必担心具有相同响应角度的两个元素。

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