CODEWITHSUNDEEP
htmlcss
Retros
Retros

Reputation: 3611

A diagonal line on top of a div

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.

Upvotes: 2

Views: 1036

Answers (2)

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 0

marcx
marcx

Reputation: 168

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.

Upvotes: 2

Related Questions