倾斜底部背景css



我想复制我的模型: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
}

相关内容

  • 没有找到相关文章

最新更新