This is my first question here, so please point out any of mistakes that I made.
I was obliged to create a web page that looks like a flag of a team. I've managed to do such, but only with fixed size of elements :
On other resolutions it just doesn't fit the screen.
Code:
html
<div id="centered">
<div id="triangle-down"></div>
<div id="triangle-right"></div>
<div id="triangle-left"></div>
<div id="triangle-up"></div>
<div id="diamond-narrow"></div>
</div>
css
#centered {
position:relative; clear:left;
height:766px; width:1245;
margin:0 auto;
background:#fff;
z-index: 0;
}
#triangle-up {
position: absolute;
margin-left: 281px;
margin-top: 555px;
width: 0;
height: 0;
border-left: 341px solid transparent;
border-right: 341px solid transparent;
border-bottom: 211px solid #3b5998;
z-index: 1;
}
#triangle-down {
position: absolute;
margin-left: 281px;
width: 0;
height: 0;
border-left: 341px solid transparent;
border-right: 341px solid transparent;
border-top: 211px solid #3b5998;
z-index: 1;
}
#triangle-left {
position: absolute;
margin-left: 902px;
margin-top: 171px;
width: 0;
height: 0;
border-top: 211px solid transparent;
border-right: 343px solid #3b5998;
border-bottom: 211px solid transparent;
z-index: 1;
}
#triangle-right {
position: absolute;
margin-top: 171px;
width: 0;
height: 0;
border-top: 211px solid transparent;
border-left: 343px solid #3b5998;
border-bottom: 211px solid transparent;
z-index: 1;
}
#diamond-narrow {
margin-left: 342px;
width: 0;
height: 0;
border: 280px solid transparent;
border-bottom: 173px solid red;
position: absolute;
top: -70px;
}
#diamond-narrow:after {
content: '';
position: absolute;
left: -280px; top: 173px;
width: 0;
height: 0;
border: 280px solid transparent;
border-top: 173px solid red;
}
Here's a jsfiddle of my flag: click
As you can see I am using css shapes to draw triangles and a diamond. My questions are:
How can I make that flag (web page) to fit different screen resolutions? How to present width and height of my shapes in percentages?
As I have read here, eg. border-left can not have a value in %.
EDIT
Thanks to @joe_coolish, I managed to make that web page resizable. However, I got one more problem.
Here's my html:
<table width="100%" style="height: 100%;">
<tr>
<td width="10%" height="10%"></td>
<td></td>
<td width="10%" height="10%"></td>
</tr>
<tr>
<td width="10%" height="10%"></td>
<td id="centered" bgcolor="white">
<div id="main"/>
</td>
<td width="10%" height="10%"></td>
</tr>
<tr>
<td width="10%" height="10%"></td>
<td></td>
<td width="10%" height="10%"></td>
</tr>
</table>
Changes to Joe's code:
var main = $('#main');
function update() {
var height = $('#centered').height();
var width = $('#centered').width();
...
$('#centered').resize(function () {
update();
});
Now when I load my page, this happens:
I have to inspect some element to work it properly. Why?
You could also go with SVG.
More math, but it does work pretty well. Just attach to the $(window).resize()
event and then update the triangles. Here is my first attempt:
var main = $('#main');
function update() {
var height = $(window).height();
var width = $(window).width();
var height10 = height / 5
var heightMinus10 = height - height10;
var width10 = width / 5
var widthMinus10 = width - width10;
var height2 = height / 2;
var width2 = width / 2;
var width3 = width2 - width10;
var height3 = height2 - height10;
var width3x2 = width2 + width10;
var height3x2 = height2 + height10;
var points1 = '0,' + height10 + ' 0,' + heightMinus10 + ' ' + width3 + ',' + height2;
var points2 = width10 + ',0 ' + widthMinus10 + ',0 ' + width2 + ',' + height3;
var points3 = width + ',' + height10 + ' '+width+',' + heightMinus10 + ' ' + width3x2 + ',' + height2;
var points4 = width10 + ','+height + ' ' + widthMinus10 + ','+height+' ' + width2 + ',' + height3x2;
var points5 = width3 + ',' + height2 + ' '+width2+',' + height3 + ' ' + width3x2 + ',' + height2 + ' ' + width2 + ',' + height3x2;
var svg1 = '<svg height="' + height + '" width="' + width + '">'+
'<polygon points="' + points1 + '" style="fill:blue" />'+
'<polygon points="' + points2 + '" style="fill:blue" />'+
'<polygon points="' + points3 + '" style="fill:blue" />'+
'<polygon points="' + points4 + '" style="fill:blue" />'+
'<polygon points="' + points5 + '" style="fill:red" />'+
'</svg>';
main.empty();
main.append($(svg1));
}
update();
$(window).resize(function () {
update();
});