Responsive triangle div

Question

I am trying to create a response triangle div that will be at the top of the page as a header.

I was able to achieve this 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 page width and vary proportionally in height.

I tried to set the width and height as a percentage, however this created a really small triangle, which you can see here:

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

How to make borders work with percentages without using web whales? Is this possible, if not so, how can I achieve this effect using web whales?

EDIT:

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

Answer 1

You can use transform-rotate and a pseudo-element to create a sensitive triangle . This method is described in detail here: CSS triangles with rotation rotation .

In your particular case, it might 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 JS backup. This answer describes how to achieve it.

Answer 2

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

eg.

 border-width: 100vw 100vh 0 0; 

Sample script: http://jsfiddle.net/swbfqemr/