如何創建帶背景的三角形形狀（固定高度，寬度= 100％）

Question

我有一個圖形背景，我需要在左上角顯示一個彩色三角形（取決於分辨率）。

我可以創建一個三角形元素只使用HTML/CSS/JS的寬度= 100％和高度= 200px背景=紅色？

我可以通過IMG創建它，寬度爲100％，但我希望能獲得比調整圖像更好的解決方案。

該解決方案需要與IE7 +兼容並使用瀏覽器版本（超過2％）。

感謝

Answer 1

要擴大web-tiki's answer，我覺得這其實是你要什麼：

$(document).ready(function() { 
 
    function triangle() { 
 
    $("#wrap .tr").css({ 
 
     "border-left": $('#wrap').width() + "px solid #fff", 
 
     "border-bottom": "200px solid transparent" 
 
    }); 
 
    } 
 
    triangle(); 
 

 
    $(window).on('resize', triangle); 
 
});

body { 
 
    background: #fff; 
 
} 
 
#wrap { 
 
    position: relative; 
 
    min-height: 500px; 
 
    background: teal; 
 
} 
 
.tr { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div class="tr"></div> 
 
</div>

Answer 2

因爲你不能創建具有百分比的邊框，請嘗試使用VW（瀏覽器寬度）來代替。因此：

.triangle{ 
    width: 0; 
    height: 0; 
    border-bottom: 600px solid blue; 
    border-left: 100vw solid transparent; 
    } 

Answer 3

Vw單位不被IE8支持，您將需要爲不支持這些單位的瀏覽器使用JS回退。

這是一個jQuery腳本，它根據窗口大小設置邊框寬度，並在窗口大小調整時調整它。測試在IE8（IE測試儀）：

$(document).ready(function() { 
 
    function triangle() { 
 
    var width = $('#wrap').width(), 
 
     border = width/4; 
 

 
    $("#wrap .tr").css({ 
 
     "border-left": border + "px solid #fff", 
 
     "border-bottom": border + "px solid transparent" 
 
    }); 
 
    } 
 
    triangle(); 
 

 
    $(window).on('resize', triangle); 
 
});

body { 
 
    background: #fff; 
 
} 
 
#wrap { 
 
    position: relative; 
 
    min-height: 500px; 
 
    background: teal; 
 
} 
 
.tr { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    border-left: 200px solid #fff; 
 
    border-bottom: 200px solid transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <div class="tr"></div> 
 
</div>

Answer 4

只要採取一個div元素，得到類名稱 '三角左上'，並寫入下面給出的CSS

.triangle-topleft { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-right: 100px solid transparent; 
} 

border-top的顏色將是div的背景顏色..這是紅色的。 更多的三角形構造，請點擊此鏈接.. [http://css-tricks.com/examples/ShapesOfCSS/][1]

Answer 5

我想最好用背景代替邊框：

.my-triangle { 
 
    width: 100%; 
 
    height: 200px; 
 
    background: linear-gradient(to left top, transparent 50%, red 50%); 
 
}

<div class="my-triangle"></div>

注意，爲了它是跨瀏覽器兼容，你需要反覆折騰的CSS前綴，IE濾波器和SVG。 （我不容易訪問IE瀏覽器，所以我會離開，一個給你，但它會沿着這些路線:)

background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000)); 
    background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%); 
    background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%); 
    background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%); 
    background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%); 
    background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);