我有两个相邻的元素:
我给了Hero Div一个剪辑路径,将图像的右下角略微向上倾斜。我需要下面的div来匹配角度,所以我给了它一个transform: rotate(x)
属性。唯一的问题是,当英雄div按其百分比缩放时,变换后的div不会随之缩放,根据大小左侧或右侧留下白色空格。
我确信这是一项很容易的任务,但我想不出适合生产的方法。
div(id="front")
section(class="hero overlay")
main
h1 xxx
div(class="angled")
想象一下,这个灰色方框的右上角向上倾斜,以便产生倾斜的盒子的效果。
我这样解决了:
.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向上拉,并将其与英雄图像的左下角对齐。
我让英雄形象本身有角度,但决定将其取出,这样我就不必担心具有相同响应角度的两个元素。
希望其他人看到这一点并采取类似移动优先的方法。