Make my border triangle responsive

Question

I have a div which is a triangle using CSS borders.

It's currently set to 500px width. however I want to make it take up the full width of the screen while maintaining its triangular pointy shape

https://jsfiddle.net/hra17z5t/1/

#one {
  width: 500px;
  background-color: aqua;
  height: 300px;
}
#two{
  border-top: 100px solid red;
  border-right: 250px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 250px solid transparent;
  width: 0;
  height: 0;    
}

<div id="one"></div>
<div id="two"></div>

You can't do that with borders as they do not take a % value. you might have to re-think. Perhaps SVG? — Paulie_D, Jul 07 '16 at 14:52

indextwo · Accepted Answer · 2016-07-07T15:01:42.113

I have updated your code example: since you wanted to make it responsive to the full browser width, it's pretty straightforward:

#one {
    width: 100vw;
    background-color: aqua;
    height: 300px;
}

#two {
    border-top: 100px solid red;
    border-right: 50vw solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 50vw solid transparent;
    width: 0;
    height: 0;
}

<div id="one"></div>
<div id="two"></div>

Here we're simply setting the box's width to 100vw, which is 100% of the browser width. Since the dimensions of your triangle respond in the same way, based on your example you can simply set the border widths to 50vw (or half the browser width), and it will grow and shrink responsively.

score 1 · Answer 2 · answered Jul 07 '16 at 14:57

Using jQuery:

$(window).resize(function () {
  var divWidth = $('#one').width();
    $('#two').css({
      borderLeftWidth: divWidth / 2,
      borderRightWidth: divWidth / 2
    });
});

$(window).trigger('resize');


#one {
  max-width: 100%;
}

JSFIDDLE

score -1 · Answer 3 · answered Jul 07 '16 at 14:56

Found this on Google when searching "Responsive CSS Triangle"

https://jsfiddle.net/josedvq/3HG6d/

Relevant code is below:

/*Down pointing*/
.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

Make my border triangle responsive

3 Answers3

JSFIDDLE