How to make HTML divider having slanted borders with CSS

Question

I'm trying to make this weird looking divider:

.jumbotron {
  background-color: rgba(0, 52, 113, 0.6);
  padding: 2em 0;
}
.jumbotron hr {
  position: relative;
  background-color: white;
  border: none;
}
.jumbotron hr:before,
.jumbotron hr:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 0;
  left: 1px;
  border-bottom: 1em solid white;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.jumbotron hr:before {
  top: 0;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.jumbotron hr:after {
  bottom: 0;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.grid {
  display: table;
  vertical-align: middle;
  border-spacing: 2.46153846em 0;
}
.grid > * {
  display: table-cell;
}

<div class="jumbotron">
  <div class="grid">
    <div>
      <h1>This is a headline</h1>
    </div>

    <hr />

    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem reprehenderit sit quasi, animi id.</p>
    </div>
  </div>
</div>

The reason for not using an image is because it is for a responsive site. I can't use extra elements either due to the spacing table-cell gives.

Now that it has the look I wanted, it still has extra gaps below the :before and above the :after. And I am sure I am not doing it the good way.

My question is, is there other way to make that divider with only the hr element.

I would use an `SVG` element. That way it can scale with the site and always look good. — ArrayKnight, Apr 10 '15 at 16:53
That's a good choice. But the content is inserted through a CMS, and it is easier to place an `hr` than an `SVG`. Besides, I want to see if I can achieve this with CSS. — Sơn Trần-Nguyễn, Apr 10 '15 at 16:58
`:pseudo element` with `
` tag.. technically it should work? I've doubt. — Kheema Pandey, Apr 10 '15 at 17:20
@Kheema Pandey: hr is implemented in most places as a replaced element, so *probably* not. — BoltClock, Apr 10 '15 at 19:22

Alvaro Menéndez · Answer 1 · 2015-04-10T20:59:55.567

Well, I think it's much more perfect (as long as I have zoomed) to use a couple squares as after and before, give them border-left, rotate them 45 degs. and the use the transform-origin in the right way.

here you have your snippet modified or if you prefer a FIDDLE

 .jumbotron {
    background-color: rgba(0, 52, 113, 0.6);
    padding: 2em 0;
    }    
.jumbotron hr {
    position: relative;
    background-color: white;
    border: none;
    }
.jumbotron hr:before,
.jumbotron hr:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0px;
    border-left: 1px solid #fff;
    }
.jumbotron hr:before {
    top: -20px;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin:left bottom;
    transform-origin: left bottom;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
.jumbotron hr:after {
    bottom: -20px;
    -webkit-transform-origin: left top;
    -ms-transform-origin:left top;
    transform-origin: left top;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }
.grid {
    display: table;
    vertical-align: middle;
    border-spacing: 2.46153846em 0;
    }
.grid > * {
    display: table-cell;
    }

   <div class="jumbotron">
  <div class="grid">
    <div>
      <h1>This is a headline</h1>
    </div>

    <hr />

    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab rem reprehenderit sit quasi, animi id.</p>
    </div>
  </div>
</div>

How to make HTML divider having slanted borders with CSS

1 Answers1