倾斜底部背景css答案

【问题标题】：Skew bottom background css倾斜底部背景css
【发布时间】：2016-11-05 17:52:19
【问题描述】：

我想复制我的模型：http://imgur.com/ZsR88fe

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

我能做些什么来解决它？

提前致谢

【问题讨论】：

用你的 Q 编写一些代码或脚本
是的，请用代码代替图片

标签： html css image background skew

【解决方案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>

【讨论】：

【解决方案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
}

【讨论】：