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

來源

2017-09-25 Rémi

而不是使用像素應該使用一個單元，其基於窗口。 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; 
}

希望它能幫助！

來源

2017-09-25 12:42:57

嘗試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

來源

2017-09-25 12:44:12

@ToniMuchelCaubet爲什麼要使用「_」屬性？這是否意味着什麼？ –

這是在原來的問題，我相信這是一些IE 7-8黑客。我認爲不再需要這些（http://browserhacks.com/） –

css中的響應三角形

回答

相關問題