Retros Retros -3 years ago 51
CSS Question

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.

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download