html - 旋转两个相邻的元素

Question

我有两个相邻的元素:

• Hero Div，带有背景图片
• 下方有一个 60 像素高的元素

我给了 Hero Div 一个剪辑路径，使图像的右下角稍微向上倾斜。我需要下面的 div 来匹配 Angular ，所以我给了它一个 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;
}

作为经典的移动优先方法，背景英雄图片的高度仅为 250 像素。 Angular div 是钱所在的地方。 padding-bottom 和 z-index 防止英雄图像溢出到底部(隐藏它)。负的 margin-top 值将 div 向上拉并将其与主图像的左下角对齐。

我让主图本身倾斜了，但决定将其移除，这样我就不必担心两个元素具有相同的响应 Angular 。

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