Question

我正在设计一个网站，我希望背景的顶部有一个倾斜的角度。我本来打算使用Jpeg，但意识到通过CSS可以提高效率。所以我通过这种方式设计一个div来建立倾斜：

-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
-ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
transform: skewY(5deg);

但是，我希望我的网站能够做出回应，并且div绝对禁止这样做。此外，浏览器强制两个div分开，留下白色背景。我可以增加两个div的高度，使它们相互重叠，但这对我来说似乎有点混乱和功能失调。我只是想知道是否有更简单的方法。下面是HTML和CSS，如果你不理解我，还有一个片段。

body,
{
  margin: 0;
  padding: 0;
  border: 0;
}
img {
  margin: 0 auto;
  text-align: center;
}
.row {
  margin-top: 100px;
  display: inline-block;
  margin-bottom: 30px;
}
.row h2 {
  font-family: sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  color: #212121;
}
h2 {
  font-size: 1em;
}
.Second-Header {
  color: black;
  font-weight: 400;
  font-family: 'Abril Fatface', cursive;
  font-size: 3em;
  margin: 80px;
}
.My-Gems {
  width: 100%;
  margin-top: -350px;
}
.global-container {
  height: 2977px;
  width: 100%;
  position: relative;
  background-color: #fff;
}
.content-container {
  background-color: #fff;
  text-align: center;
  padding: 0px;
  margin: 0px;
  position: relative;
  max-width: 1359px;
  width: 100%;
}
.post-container {
  background-color: gray;
  z-index: 0;
  text-align: center;
  height: 50%;
  top: 300px;
  max-height: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
  width: 100%;
}
.Well-Aligned {
  position: absolute;
  left: 0;
  top: 300px;
  width: 100%;
  height: 300px;
  background-color: gray;
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}
.Biographical-Content {
  display: block;
  top: -350px;
  position: relative;
  font-family: "Abril+Fatface", sans-serif;
  width: 65%;
  margin-left: auto;
  text-align: center;
  padding: 0px;
  z-index: 99999;
  margin-right: auto;
}
.Biographical-Content p {
  margin-top: 10px;
  color: #404040;
  padding: 0px;
  font-size: 20px;
  line-height: 2em;
}

<div class="content-container">

  <div class="row">
    <h2>
                Hello
                <span></span>
            </h2>
  </div>

  <div class="Well-Aligned"></div>
  <div class="post-container">
    <div class="Biographical-Content">
      <div class="step out-view"></div>
      <br>
      <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
        uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
      <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
        uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
      <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
        uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
      <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
        uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
    </div>

Answer 1

希望我理解问题。将.bg的高度调整到你想要的高度。

body{
 background: #222;
 color: #FFF;
 }
 .bg{
 left: 0;
padding-top: 300px;
width: 100%;
height: 300px;
background-color: gray;
padding: 200px 0;
-webkit-transform: skewY(5deg);
 -moz-transform: skewY(5deg);
 -ms-transform: skewY(5deg);
-o-transform: skewY(5deg);
 transform: skewY(5deg);
 margin-top:50px;  
 }
.content{
width: 65%;
margin:0px auto;
   -webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
 transform: skewY(-5deg);
  text-align: center;
  margin-top:-200px;
  }
  .title{
    padding-top: 100px;
    font-weight: normal;
  }

   .text{
     width:60%;
     margin: 25px auto;      
     color:#FFF:
   }

<head>
<style>






   </style>
   </head>
 <html>
<body>
<div class="bg">
<div class="content">
    <h1 class="title">Hello</h1>
 <p class="text"> <br>
  <p>My favourite book is The Prince by Nicolo Machievelli. My           favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
    uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
  <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
    uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
  <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
    uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
  <p>My favourite book is The Prince by Nicolo Machievelli. My favouirite meal is Arroz De Marisco. The quote; brands are formed with rigour and consumed with pleasure sums up the way I approach brand creation. Differentiation is a big thing for me,
    uniqueness nowadays is rare. If you would like to know more about my experiences you can <a href="">download my CV</a>.</p>
</div>
</div>

创建响应式倾斜角度div背景

1 个答案: