A diagonal line on top of a div - html

Question

I've already coded this, but I'm just wondering if there's an easier way to make this? My way seems a bit 'glitchy', especially since I'm going to need the content to be in the middle of a div.
Here's my code so far:
body {
padding-top: 20px;
}
#line {
border-style: solid;
border-width: 90px 100vw 0 0;
border-color: white #fafafa transparent transparent;
transform: scale(1.0001);
}
.wrap {
background-color: #fafafa;
text-align: center;
padding-bottom: 100px;
}
hr {
width: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="line"></div>
<div class="wrap">
<h2>Title</h2>
<hr>
<p>Text goes here</p>
<a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>
I don't want to use SVG, though. I'm trying to achieve this with CSS only.

Answer 1

You can use a div with either a border or the div itself with a set height and then use CSS transforms to rotate i.e. transform: rotate(7deg);
https://www.w3schools.com/cssref/css3_pr_transform.asp
Your solution is great though, and effective for allowing the div to cover the page.

Answer 2

I wouldn't use an element just for that effect. This is design, so separating it from the markup and keeping it in CSS would be ideal. You can use a pseudo element instead. And you can make one that is wide and use transform: rotate() with it to create a diagonal line.
body {
padding-top: 20px;
}
.wrap:before {
content: '';
position: absolute;
top: -50px;
left: -100%;
right: -100%;
bottom: 50%;
background: #fafafa;
transform: rotate(-2.5deg);
z-index: -1;
}
.wrap {
background-color: #fafafa;
text-align: center;
padding-bottom: 100px;
margin-top: 100px;
position: relative;
}
hr {
width: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrap">
<h2>Title</h2>
<hr>
<p>Text goes here</p>
<a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>