如何用背景创建三角形形状（固定高度，宽度= 100％） [英] How to create an triangle shape (fixed height, width=100%) with background

问题描述

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

我可以使用HTML / CSS / JS创建一个三角形形状的元素，宽度= 100％，高度= 200px，背景=红色？

我可以通过IMG创建width = 100％，但我希望一个更好的解决方案，而不是调整图像大小。

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

感谢

方案

要展开 web-tiki的回答，我想这实际上是你要去for：

< pre class =snippet-code-js lang-js prettyprint-override> $（document）.ready（function（）{function triangle（）{$（＃wrap .tr）。css （{border-left：$（'＃wrap'）。width（）+px solid #fff，border-bottom：200px solid transparent}）;} .on（'resize'，triangle）;}）;

  body {background：#fff;}＃wrap {position：relative; min-height：500px;背景：teal;}。tr {position：absolute; left：0; top：0;}  

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

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).

Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?

I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.

The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).

Thanks

解决方案

To expand on web-tiki's answer, I think this is actually what you're going for:

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

这篇关于如何用背景创建三角形形状（固定高度，宽度= 100％）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！