css中的响应三角形

问题描述：

我只是试图在css中绘制响应三角形。它的高度和它的宽度应该在窗口调整大小时调整。css中的响应三角形

这是我在静：

#triangle { 
    z-index: 2; 
    width: 0; 
    height: 0; 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    border-style: solid; 
    border-width: 0 0 600px 1100px; 
    border-color: transparent transparent #01fe77 transparent; 
    line-height: 0px; 
    _border-color: #000000 #000000 #01fe77 #000000; 
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
}

而不是使用像素应该使用一个单元，其基于窗口。 vw和vh将完成这项工作。 –

没错，问题只是他需要多快，适合放在某个盒子里，或者只是在移动设备上变小？ – skobaljic

另外，使用svg而不是“hacky”css会更适合形状。 –

答

你的代码看起来应该是这样

#triangle { 
    z-index: 2; 
    width: 0; 
    height: 0; 
    position:absolute; 
    right:0px; 
    bottom:0px; 
    border-style: solid; 
    border-width: 0 0 60vw 60vw; 
    border-color: transparent transparent #01fe77 transparent; 
    line-height: 0px; 
}

希望它能帮助！

答

尝试viewport宽度vw单元

#triangle { 
    z-index: 2; 
    width: 0; 
    height: 0; 
    _border-color: #000000 #000000 #01fe77 #000000; 
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
    display: block; 
    border-style: solid; 
    border-width: 0 0 50vw 100vw; 
    border-color: transparent transparent #01fe77 transparent; 
    line-height: 0px; 
}

Test it

@ToniMuchelCaubet为什么要使用“_”属性？这是否意味着什么？ –

这是在原来的问题，我相信这是一些IE 7-8黑客。我认为不再需要这些（http://browserhacks.com/） –

css中的响应三角形

相关推荐