How to rotate a rectangle's background responsively?-CodePudding

I'm trying to create the following background, and wonder how to get started doing this shape with CSS.

I was thinking about:

Main div - the grey background

Secondary div - a rotated rectangle

.outer {
    background: grey;
}

.outer .rect {
   position: absolute;
    text-align: center;
    top: -260px;
    left: -50px;
    transform: rotate(50deg);
    width: 500px;
    height: 500px;
    background: linear-gradient(#EFF0F4, #D1D1D6);
}

The issue is that the rectangle is not responsive, for bigger screens the rectangle "arrow" shape at the bottom will not be in the middle.

Is there a way to make such shapes responsive?

CodePudding user response：

Multiple background can do this easily. A conic-gradient as a top layer with a transparent part and below it the main gradient.

.box {
  width:300px;
  height:300px;
  background:
   conic-gradient(from -45deg at 50% 50%,#0000 0 90deg,grey 0),
   linear-gradient(red,blue);
}

<div class="box"></div>

CodePudding user response：

Yes, so to make things responsive or dynamic, you cannot set fixed attributes such as height and width by a non-dynamic value such as pixels. You are saying that you ALWAYS want it to be at a certain pixel no matter the view port. So, instead use the rem unit, which is based on a percent, which is responsive and dynamic. By default in CSS, 1 rem is = 16px so do the math on on your dimensions to get the result you want. See code I did for you.

.outer {
  background: grey;

 .rect {
   position: absolute;
 text-align: center;
 top: -16.25rem;
 left: -3.13rem;
 transform: rotate(50deg);
 width: 31.25rem;
 height: 31.25rem;
 background: linear-gradient(#EFF0F4, #D1D1D6);
}
}

CodePudding user response：

You have to use width relative to the viewport in order for the div to adjust accordingly. Use viewport width and viewport height.

* {
  margin: 0;
  padding: 0;
}

.outer {
  background: rgb(128, 118, 118);
  max-width: 100vw;
  height: 100vh;
}

.rect {
  width: 100vw;
  height: 50vh;
  background-image: linear-gradient(to bottom right, transparent 50%, #56575c 0), linear-gradient(to top right, #56575c 50%, transparent 0);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
  rotate: 180deg;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="stack.css">
</head>

<body>
  <div class="outer">
    <div class="rect"></div>
  </div>

</body>

</html>

CodePudding user response：

Here one solution. You can resize screen to see it changes content accordingly and stay in proportion.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        margin: 0 auto;
        width: calc(40% - 10px);
        padding: 18%;
        background: linear-gradient(-35deg, gray 38%, transparent 25%),
          linear-gradient(35deg, gray 38%, transparent 25%),
          linear-gradient(gray , black);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>