我想复制我的模型:https://i.stack.imgur.com/YcgmM.jpg
但是我不知道如何倾斜我的背景图像,只有在底部。对于nom,我尝试倾斜变换,但是所有的图像都倾斜了,页面的顶部看起来很难看:https://i.stack.imgur.com/IAZeJ.jpg
我能做些什么来修复它?
Thanks in advance
歪斜或倾斜的div,英雄或登陆页可以快速使用clip-path CSS属性与多边形函数。
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);//这是一个完整的正方形歪斜可以减少每个角度的百分比。
这是如何在任何组件上制作倾斜。
.skew {
height: 50vh;
width: 100%;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 0px 100%);
background:#0a3;
}
<div class="skew">
<h1> Hey there </h1>
</div>
要用CSS为你的图像制作一个底部倾斜,你需要一些包装器:
- 内容div用于所有文本
- 将创建倾斜并隐藏倾斜区域的图像包装器
- 图像div,只包含英雄图片
然后你需要应用相反的倾斜图像div,使其不扭曲。在那之后,你必须搞乱定位,以确保尽可能多的图像是可见的,顶部倾斜是隐藏的。也许有一个更聪明的解决方案,我只是使用硬编码像素值。
这里是演示,这里是重要的部分:
HTML<div class="hero">
<div class="bg-img-wrapper">
<div class="bg-img"></div>
</div>
<div class="hero-content">
<h1>Cool company slogan</h1>
<p>Catchy subslogan</p>
</div>
</div>
SCSS(你可以只是替换变量,它将是有效的CSS,但他们帮助可读性在这里)
$skewDeg: 5deg;
$offset: 70px;
.hero {
height: 100vh; // Make the hero area take 100% height
overflow: hidden; // Child's skew will cause overflow, so we hide it here
position: relative; // Children will be positioned absolutely relative to this
}
.bg-img-wrapper {
transform: skewY($skewDeg);
position: absolute;
top: -$offset; // Move the top skew offscreen
bottom: $offset; // Move the skewed area up a bit so more of it is visible
right: 0;
left: 0;
overflow: hidden; // Hide the areas that we skewed away
}
.bg-img {
background: url('https://unsplash.it/1280/720/?random') center no-repeat;
background-size: cover;
position: absolute;
top: $offset; // Move the image down by the amount of the parent that's being rendered offscreen
bottom: -$offset;
right: 0;
left: 0;
transform: skewY(-$skewDeg); // Skew the opposite amount of the parent to make the image straight again
}
.hero-content {
position: relative; // Relative positioning here makes the hero content visible
}