javascript - 在缺乏 CSS 技能的情况下创建可调整大小的网站 - CSS 形状

Question

这是我的第一个问题，所以请指出我犯的任何错误。

我不得不创建一个看起来像团队旗帜的网页。我已经设法做到了，但只有固定大小的元素:

在其他分辨率下，它只是不适合屏幕。
代码:

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;
    }

这是我的标志的 jsfiddle:click
如您所见，我正在使用 css 形状绘制三 Angular 形和菱形。我的问题是:
如何使该标志(网页)适应不同的屏幕分辨率？如何以百分比显示形状的宽度和高度？
正如我所读here ，例如。 border-left 不能有 % 中的值。

编辑
感谢@joe_coolish，我设法使该网页可调整大小。然而，我又遇到了一个问题。
这是我的 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>

对 Joe 代码的更改:

var main = $('#main');

function update() {

var height = $('#centered').height();
var width = $('#centered').width();

...

$('#centered').resize(function () {
update();
});

现在，当我加载我的页面时，会发生这种情况:
我必须检查一些元素才能正常工作。为什么？

Answer 1

您也可以使用 SVG。

更多的数学，但它确实工作得很好。只需附加到 $(window).resize() 事件，然后更新三 Angular 形。这是我的第一次尝试:

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();
});

http://jsfiddle.net/ePt62/