CODEWITHSUNDEEP
htmlcss
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Rotated div to be full height and full half side of the screen no matter the screen size

I want the blue div to fill the right side of the screen. Given that the div is rotated, on large screens the top corner will appear unless I set the width and height to be 1000%. I have to deal with really large screens.

What will be the solution to not insert high values there? Thanks!

.background {
  background: blue;
  width: 100%;
  height: 100%;
  transform: rotate(-10deg);
}

.right {
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60%;
  height: 120%;
}
<div class="right">
  <div class="background"></div>
</div>

JSFiddle

Upvotes: 1

Views: 192

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

.background {
  background: blue;
  width: 100%;
  height: 100%;
  transform: skew(10deg);
}

.background2 {
  width: 10%;
  position: absolute;
  right: -15%;
  top: 0;
  background-color: blue;
  height: 110%;
}

.right {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 60%;
  height: 120%;
}
<div class="right">
  <div class="background">

  </div>
</div>
<div class="background2">

</div>

Upvotes: 0

JonnyBeoulve
JonnyBeoulve

Reputation: 140

For this particular sort of solution, I'd suggest using a background-image with linear-gradient dictating the two colors, while degree and percentages shape their border. Here's an example:

.diagonal-color-div{
  background-color: #fff;
  background-image: -webkit-linear-gradient(10deg, #fff 50%, #004E95 50%);
  min-height: 1080px;
}

Here's the above code demonstrated live: https://codepen.io/anon/pen/qKYmdv

Upvotes: 1

Related Questions