Question

我面临CSS调整的小设计问题。我倾斜了所有部分和元素的背景，但在页脚附近，我想加入文章和页脚，它不是根据设计调整任何人请帮助如何解决它。这是我的plunker链接。

<https://plnkr.co/edit/iCgonAiCoBUfSaAF851P?p=preview>

Answer 1

正如评论中所建议的那样，为您的身体添加背景颜色并在页脚中添加一些margin-top，并使用以下CSS：

body, html {
    height: 100%;
    margin: 0;
    background:#191919;
}
.hero-image {
  background-color: #6c7cd0;
  padding: 200px 0;
  transform: skew(0deg, -10deg);
  margin-top: -150px
}
.hero-text {
  transform: skew(0deg, 10deg);
  text-align: center;
}

.wrapper {
  transform: skew(0deg, -10deg);
  background: #191919;
  color: white;
}
section, article {
  transform: skew(0deg, 10deg);
  padding: 20px;
}
.wrapper::after{
  transform: skew(0deg, -10deg);
}

div > h1 {
  margin-top: 50px;
}
footer {
  text-align: center;
  background: #6c7cd0;
  color: white;
  margin-top:50px;
  padding: 20px;
}

注意：您的布局需要在特定于偏斜问题的较大视口中进行大量工作。

希望这会有所帮助。

Answer 2

将CSS更改为以下

section {
background: #191919;
  color: white;
}
section, article {
  transform: skew(0deg, -10deg);
  padding: 20px;
}
section>div, article >div{
    transform: skew(0deg, 10deg);
}
article {
  background: white;
  color: black;
}

Plunker Link

倾斜背景与角度组件

2 个答案: