Adding diagonal borders to bottom/top of div element?

Question

I'm looking for the best way to add a diagonal border to the bottom of a div element. Preferably in a way so it would also work responsively.

This image is an example of how I would want it to look:

The dark part is the header of my website and the white part is where the content will start. So the diagonal lines will act like a seperator.

I made a little example but it's not really working yet: http://jsfiddle.net/ckknu2tr/

I'm using 2 different divs with a border, one for the left and one for the right side, code example:

.borderright {
    line-height: 0%;
    width: 0;
    border-top: 50px solid transparent;
    border-right: 400px solid white;
    position: absolute;
    bottom: 0;
    right: 0;
}

For your case, you could make use of angled linear gradients as background. Have a look at this thread and it would help you - stackoverflow.com/questions/30317427/… — Harry
– Harry, Commented Aug 15, 2015 at 10:06
You could also have a look at this thread (stackoverflow.com/questions/30441122/…) for a variety of approaches to create angled sides which are responsive. It does one half while you would have to do the other side of it. — Harry
– Harry, Commented Aug 15, 2015 at 10:12

Etheryte · Accepted Answer · 2015-08-15 10:30:21Z

3

You could use SVG for this. Below is a short example, which can probably be simplified, I use SVG very rarely and am not that proficient with it.

body {
  background-image: url(http://i.imgur.com/XxGffrU.jpg);
  background-size: cover;
  background-position: center bottom;
  margin: 0;
}
#your_div {
  position: relative;
  top: 100px;
  margin-top: 100px;
  width: 100%;
  height: 100px;
  background: white;
}
#back {
  position: relative;
  top: -99px;
  width: 100%;
  height: 100px;
}

<div id="your_div">
  <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
    <path d="M 0,4 L 45,8 50,5 55,8 100,4 100,10 0,10 z" style="fill: white;"></path>
    <path d="M 0,0 L 45,8 55,8 100,0 100,10 0,10 z" style="fill: rgba(255,255,255,0.5)"></path>
  </svg>
</div>

answered Aug 15, 2015 at 10:30

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding diagonal borders to bottom/top of div element?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related