How to make a responsive slanted polygon div?-CodePudding

I want to make a responsive slanted div such that the output will be as required output plz help.

CodePudding user response：

Try with this skew.

body {
  height: 100vh;
  margin: 0;
  background: orange;
}

body:before {
  content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: blue;
    transform: skew(296deg);
    transform-origin: top;
}

<body>
  <div>

  </div>
</body>

CodePudding user response：

You can use a linear-gradient background, specifying direction right bottom. That will adjust to different aspect ratios.

Here's a simple example:

* {
  margin: 0;
  padding: 0;
}

.bg {
  background-image: linear-gradient(to right bottom, blue 0 50%, navy 50% 100%);
  height: 50vh;
  width: 100vw;
}

<div ></div>