如何创建三角形形状（固定的高度，宽度= 100％）与背景(How to create an tria

我有一个图形背景，我需要在左上角显示一个彩色三角形（independing分辨率）。

我可以创建仅使用HTML / CSS / JS与宽度= 100％和高度= 200像素与背景红色=一个三角形形元件？

我可以通过用宽度= 100％IMG创建它，但我希望的比调整大小的图像的更好的解决方案。

该解决方案需要与IE7 +，并使用浏览器的版本（超过2％）兼容。

谢谢

Answer 1:

为了扩展网络的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 2:

因为你不能创建具有百分比的边框，请尝试使用VW（浏览器宽度）来代替。所以：

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

Answer 3:

大众单位不支持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:

我认为这将是最好用的背景，而不是边界：

 .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元素，给一个类别名称“三角左上”，并写了如下的CSS

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

边框顶部的颜色将是div的背景color..Here它是红色。有关详细的三角形的结构，此链接.. [ http://css-tricks.com/examples/ShapesOfCSS/][1]

文章来源: How to create an triangle shape (fixed height, width=100%) with background