Create a responsive slant angle div background

Question

I'm currently designing a website and I want the top of the background to have a slanted angle. I was going to originally use a Jpeg, but realized that it would be more efficient through CSS. So I made a way to establish the slant simply by styling a div in this manner:

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

However, I would like my website to be responsive and the div being absolute forbids that. Also the browser forces the two divs to come apart leaving the white background. I could increase the height of both the divs so they overlap each other, however it all seems a bit messy and dysfunctional to me. I was just wondering if there is an easier way around this. The HTML and CSS is below, as well as a snippet should you are not understanding me.

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>

The `skew` based approach does have this problem. You could have a look at the various approaches mentioned in the linked thread and choose the one that fits your case best. My suggestion would be using gradients or SVG. Gradients does have the drawback of jagged edges though. — Harry, Jul 16 '15 at 04:06

user3669714 · Answer 1 · 2015-07-16T02:14:18.550

hope i understood question. adjust height in .bg to what ever height you want.

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>

Create a responsive slant angle div background

1 Answers1