我有两个相邻的元素:
我给了Hero Div一个剪切路径,以稍微向上倾斜图像的右下角。我需要下面的div来匹配角度,因此我给了它一个transform: rotate(x)
属性。唯一的问题是,随着英雄div随其百分比缩放,转换后的div不会随其缩放,因此根据大小在左边或右边留出空白。
我确信这对很多人来说是一件容易的事,但我想不出适合生产的方法。
div(id="front")
section(class="hero overlay")
main
h1 xxx
div(class="angled")
想象一下这个灰色框的右下角向上倾斜,以产生倾斜的效果。
答案 0 :(得分:0)
我这样解决了:
.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向上拉,并将其与英雄图像的左下角对齐。
我使英雄图像本身倾斜,但决定将其删除,这样我就不必担心两个具有相同响应角度的元素。
希望其他人看到这一点,并采取类似的移动优先方式。