Skewed Background Design | HTML And CSS

"skew background" is also a very trending pattern of website design and this kind of background is still used in websites. We don't have a lot of words to talk about. You can see in the image what it looks like.

In this design, the background "div" is rotated at some angle so that it looks skew while the main content of the website will remain in the same position.

01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Skew Background Design | Rustcode</title>  
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>

02. HTML

<body>
  <div class="container">
    <div class="content">
      <h1 class="title">Skewed Background</h1>
      <p class="para">Nullam vitae purus vel est varius pellentesque sed a lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam suscipit dictum odio et varius. Quisque at laoreet sapien. Maecenas et mauris massa. Praesent dapibus purus neque, et sagittis lorem hendrerit ac.</p>
    </div>
  </div>
  <div class="footer">
    <p>Thanks For Watching!</p>
  </div>
</body>

03. CSS

body {
  padding: 0px;
  margin: 0px;
  background: #222;
  color: #fff;
  font-family: arial, sans-serif;
}

.container {
  background: #255957;
  padding: 150px 0px;
  transform: skew(0deg, -10deg) translateY(-150px);
}

.content {
  transform: skew(0deg, 10deg);
  text-align: center;
}

.title {
  padding-top: 100px;
  font-weight: normal;
}

.para {
  width: 60%;
  margin: 25px auto;
  color: #fff;
  line-height: 1.5;
}

.footer {
  padding-top: 250px;
}

.footer p {
  text-align: center;
  opacity: .4;
}

04. Youtube Video

Here We are attaching a Youtube video from our channel so that you can understand this article better and you can create a better web user interface. We have a lot of videos on YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.

05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.

Archive