这是我的第一个问题,所以请指出我犯的任何错误。
我不得不创建一个看起来像团队旗帜的网页。我已经设法做到了,但只有固定大小的元素:
在其他分辨率下,它只是不适合屏幕。
代码:
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();
});
现在,当我加载我的页面时,会发生这种情况:
我必须检查一些元素才能正常工作。为什么?
最佳答案
您也可以使用 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();
});
关于javascript - 在缺乏 CSS 技能的情况下创建可调整大小的网站 - CSS 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21001424/