Question

我想重现我的模型：http://imgur.com/ZsR88fe

但我不知道如何扭曲我的背景图像，只是在底部。对于nom我尝试变换偏斜但是所有图像都是倾斜的并且页面的顶部看起来很丑： http://imgur.com/TkUgppW

我该怎么做才能解决它？

提前致谢

Answer 1

使用具有多边形功能的 clip-path CSS属性，可以快速制作

倾斜或倾斜的div，英雄或登陆页面。

剪切路径：多边形（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>

Answer 2

要使用CSS为图像制作底部歪斜，你需要一些包装器：

所有文字的内容div
图像包装器将创建倾斜并隐藏倾斜区域
只包含英雄图片的图片div

然后，您需要将相反的偏斜应用于图像div，以使其不会失真。之后，您必须处理定位，以确保尽可能多的图像可见并隐藏顶部倾斜。也许有一个更聪明的解决方案，我只使用硬编码像素值。

Here's the demo，这是重要的一点：

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
}

歪斜底部背景css

2 个答案: