Responsive triangle div

Question

I'm trying to create a responsive triangle div which will sit at the top of the page as a header.

I was able to achieve that with the following code:

div{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 400px 0 0;
  border-color: #007bff transparent transparent transparent;
}

<div></div>

The problem is that I want this triangle to be responsive to the width of the page and change proportionally in height as well.

I tried setting width and height to percent based, however that produced a really small triangle which you can see here:

http://jsfiddle.net/Ltbzkq0e/1/

How to make the borders work with percent without having to use webkits? Is that possible, if not how do I achieve this effect with webkits?

EDIT:

I would also like to fit content in this div. At the moment the only way I can think of is to use absolute positioning and set height to -20px, etc... Is there a better way of accomplishing this?

Won't be much use as a 'header' since it can't hold content. — Paulie_D, Nov 12 '14 at 16:32
I've updated my question as I've realized the limitations of using borders and transformations. — Bagzli, Nov 12 '14 at 17:01

score 4 · Accepted Answer · edited May 23 '17 at 11:46

4

You can use transform-rotate and a pseudo element to create a responsive triangle. This technique is detailed here : CSS triangles with transform rotate.

For your specific case it could look like this :

DEMO

.tr{
    padding-bottom:30%;
    position:relative;
    overflow:hidden;
}
.tr:before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:120%; height:100%;
    background-color : #0079C6;
    
    -webkit-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    transform-origin:0 100%;
    
    -webkit-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    transform: rotate(-17deg);
}
.content{
    position:absolute;
}

<div class="tr">
    <div class="content"> ... CONTENT HERE ...</div>
</div>

If you need IE8 support, you will need to use a JS fallback. This answer describes a way to achieve it.

edited May 23 '17 at 11:46

Community

1
1

answered Nov 12 '14 at 16:41

web-tiki

99,765
32
217
249

How come the width of the triangle doesn't reach the end of the page and yet you have the width set at 120%. What would I have to do for it to hit corner to corner, is it just a matter of playing with % or different angle rotations as well? – Bagzli Nov 12 '14 at 17:07
you can play with the rotation angle and the `padding-bottom` on .tr to tweak it as desired. – web-tiki Nov 12 '14 at 17:08
@Bagzli like this (tweaked bottom padding) http://jsfiddle.net/webtiki/hnc597cv/2/ – web-tiki Nov 12 '14 at 17:09

score 3 · Answer 2 · answered Nov 12 '14 at 16:25

3

if you don't care about IE8 and recent Android support — and since you need to have border-width proportional to the page size — you can use viewport-based (vw and vh) units

e.g.

border-width: 100vw 100vh 0 0;

example fiddle: http://jsfiddle.net/swbfqemr/

answered Nov 12 '14 at 16:25

Fabrizio Calderan

120,726
26
164
177

I think you have vw and vh swapped. Never the less it worked for what I was initially asking. Now that I've tried to take this a step further I've encountered another problem. I've updated my question to reflect that. – Bagzli Nov 12 '14 at 17:03
Didn't you mean it the other way arounde, i.e. `border-width: 100vh 100vw 0 0;`. – Bram Vanroy Nov 12 '14 at 17:03

Responsive triangle div

2 Answers2

Linked