CODEWITHSUNDEEP
htmlcsscss-shapes
factordog
factordog

Reputation: 597

Rotate div and have it displayed across entire screen

I have a div that I am wanting to rotate -20deg. I have gotten it to do just that, the problem I am facing is that it is not displaying it across the whole screen.

It is obviously just displaying a div that is 100% width and 100% height. What I am wanting it to do is cover the whole screen at an angle, so you can not see the left/right corners. If I extend the width above 100% it works but that is only going to push the width of the entire browser out.

Is there any way to get it to display at an angle so that it doesn't show the corners and is across the whole screen?

Fiddle: https://jsfiddle.net/2dhkk03b/

.content {
  width: 70%;
  margin: 0 auto;
  position: relative;
  height: 700px;
}
.intro {
  width: 60%;
  text-align: left;
  position: absolute;
  top: 50px;
  color: black;
  font-weight: 300;
  font-size: 2em;
}
.para_txt {
  padding-top: 40px;
}
.intro p {
  font-size: 24px;
}
.slide {
  position: relative;
  width: 100%;
  background-color: red;
  height: 400px;
  transform: rotate(-20deg);
}
<div class="content">
  <div class="intro">
    <span>Hi there!</span>
    <p class="para_txt">My name</p>
  </div>
</div>
<div class="slide"></div>

Upvotes: 1

Views: 1230

Answers (2)

web-tiki
web-tiki

Reputation: 103770

You can use a pseudo element for the rotated rectangle and set overflow hidden on the parent div to hide the corners and prevent the bottom scrollbar : 

.content {
  width: 70%;
  margin: 0 auto;
  position: relative;
  height: 700px;
}
.intro {
  width: 60%;
  text-align: left;
  position: absolute;
  top: 50px;
  color: black;
  font-weight: 300;
  font-size: 2em;
}
.para_txt {
  padding-top: 40px;
}
.intro p {
  font-size: 24px;
}
.slide {
  position: relative;
  height: 1000px;
  overflow: hidden;
}
.slide:after {
  content: '';
  position:absolute;
  top:35%;
  width:100%; height: 30%;
  background: red;
  transform: rotate(-20deg);
}
<div class="content">
  <div class="intro">
    <span>Hi there!</span>
    <p class="para_txt">My name</p>
  </div>
</div>
<div class="slide">
</div>

Upvotes: 1

Brent
Brent

Reputation: 2485

The problem is the corners of the div are square so if you rotate a rectangle x degrees you will lose some width.

The ideal solution would be to increase the size and minus the left margin for example.

width: 180%;
margin-left: -40%;

Thanks

Upvotes: 0

Related Questions