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

Question

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

我是否可以僅使用寬度= 100％且高度= 200px且背景=紅色的HTML / CSS / JS創建三角形元素？

我可以通過寬度= 100％的IMG創建它，但我希望有一個比調整圖像大小更好的解決方案。

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

謝謝

Answer 1

因為您無法創建具有百分比的邊框，請嘗試使用vw（查看器寬度）。 所以：

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

Answer 2

IE8不支持Vw單元，對於不支持這些單元的瀏覽器，您需要使用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 3

為了擴展web-tiki的答案 ，我認為這實際上就是你想要的：

 $(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 4

我認為最好使用背景而不是邊框​​：

 .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%);

Answer 5

只需要一個div元素，給一個類名'triangle-topleft'，然后寫下面給出的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 ]